我有一个默认禁用保存按钮状态的表单.当两个文本字段有一个值时,我切换状态.在同一窗体的另一个实例中,当编辑方法打开带有值的窗体时,我希望按钮状态不被禁用.

请注意,我也在使用redux.

这是添加的表格.

const MyForm = ({ navigation, ...props }) => {
  const [isDisabled, setIsDisabled] = useState(true);

  const handlePrice = (enteredPrice) => {
    setPrice(enteredPrice);
    isValueEntered(enteredPrice, windowType);
  };

  const handleType = (enteredText) => {
    setWindowType(enteredText);
    isValueEntered(price, enteredText);
  };
  // This is where disabled is toggled for save button
  const isValueEntered = (priceSet, type) => {
    if (priceSet != 0 && type.length > 1) {
      setIsDisabled(false);
    }
  };

  const handleSubmit = () => {
    props.onFormSubmit({
      id: props.id,
      windowType,
      price,
    });
    setWindowType('');
    setPrice(0);
    // other values
  };

  return (
    <FormWrapper>
      // ....
      <Button
        title="Save"
        onPress={() => handleSubmit()}
        disabled={isDisabled ? true : false}
      ></Button>
      <StyledInput
        placeholder={'Window Type'}
        color={'black'}
        onChangeText={handleType}
        value={windowType}
        width={'175px'}
      />
      <StyledInput
        width={'65px'}
        color={'black'}
        onChangeText={handlePrice}
        value={`${price}`}
        keyboardType="decimal-pad"
        returnKeyType="done"
      />
      // ...
    </FormWrapper>
  );
};

下面是我的编辑表单实例的外观.

const EditableCounter = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleEditClick = () => {
    setIsOpen(true);
  };

  const handleFormClose = () => {
    closeForm();
  };

  const closeForm = () => {
    setIsOpen(false);
  };

  const handleSubmit = (counter) => {
    props.onFormSubmit(counter);
    closeForm();
  };

  return isOpen ? (
    <MyForm
      key={props.counter.item.id}
      id={props.counter.item.id}
      windowType={props.counter.item.windowType}
      price={props.counter.item.price}
      onFormClose={handleFormClose}
      onFormSubmit={handleSubmit}
    />
  ) : (
    <Counter
      key={props.counter.item.id}
      counter={props.counter.item}
      onFormClose={handleFormClose}
      onEditClick={handleEditClick}
    />
  );
};

推荐答案

一种方法是使用useEffect挂钩,并将表单域作为依赖项.当任何依赖项发生更改时,请再次验证该表单.大概是这样的:

const [isDisabled, setIsDisabled] = useState(true);

useEffect(() => {
  setIsDisabled(text.length < 1)
}, [text])

return (
  <View>
    <TextInput onChangeText={setText} value={text} />
    <Button title="Save" disabled={isDisabled} />
  </View>
);

React-native相关问答推荐

react-native Expo项目中的文件上传不起作用

如何更改分隔底部标签和屏幕内容的线的 colored颜色 ?React Native Tab导航器

如何根据设备主题更改React Native中状态栏的背景?

React Native 中的视图与 Flex 不占用相同的高度空间

expo 日历应用因权限问题而崩溃

调用 ES6 方法时绑定上下文.如何从称为回调的方法中访问对象?

React Native:双击退出应用程序

如何在 react-native 上自动聚焦下一个 TextInput

react native图像不适用于特定 URL

在 Docker 中使用 Fastlane 构建 iOS 应用

在配置 react-native-maps 中获取 "supportLibVersion" 、 "playServicesVersion" 和 "androidMapsUtilsVersion" 值

react-native async 函数返回 promise 但不返回我的 json 数据?

检测是否通过推送通知打开了 React Native iOS 应用

在 React Native 中,如何使用浅渲染测试我的组件?

> 任务 :app:checkDebugAarMetadata 在运行 react-native run-android 时失败

react-native如何禁用android开发模式

React Native 将状态中的数组值应用为 Picker 项

试图在一个本应是不可变且已被冻结的对象上设置密钥

为react-native TextInput 设置边框

如何在 React Native 中强制禁用 iOS 暗模式