React Native：编辑表单填充后如何取消按钮禁用状态

我有一个表单，保存按钮默认处于禁用状态。当两个文本输入框都有值时，切换该状态为启用。在编辑场景下打开表单时，表单已填充数据，我希望此时保存按钮不处于禁用状态。注：我同时使用了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);
  };
  // 切换保存按钮禁用状态的逻辑
  const isValueEntered = (priceSet, type) => {
    if (priceSet != 0 && type.length > 1) {
      setIsDisabled(false);
    }
  };

  const handleSubmit = () => {
    props.onFormSubmit({
      id: props.id,
      windowType,
      price,
    });
    setWindowType('');
    setPrice(0);
    // 其他值重置
  };

  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}
    />
  );
};

问题根源 #

当前MyForm组件的isDisabled状态默认设为true，但在编辑场景下，组件初始化时并未根据传入的windowType和price props更新状态，导致按钮依然禁用。此外，isValueEntered函数只处理了启用按钮的逻辑，未覆盖输入清空时重新禁用的场景，存在逻辑漏洞。

修复步骤 #

1. 初始化时根据props设置输入值与禁用状态
   编辑场景下直接用传入的props初始化输入值，同时判断按钮是否该禁用：

   const [windowType, setWindowType] = useState(props.windowType || '');
   const [price, setPrice] = useState(props.price || 0);
   // 直接计算禁用状态，无需单独维护isDisabled变量
   const isDisabled = !(price != 0 && windowType.length > 1);
   

2. 移除冗余的状态维护逻辑
   不需要单独维护isDisabled状态，渲染时直接根据当前输入值计算，避免状态不同步问题。同时简化输入处理函数：

   const handlePrice = (enteredPrice) => {
     setPrice(enteredPrice);
   };
   
   const handleType = (enteredText) => {
     setWindowType(enteredText);
   };
   

3. 更新按钮的禁用属性
   直接使用计算出的isDisabled值：

   <Button
     title="Save"
     onPress={() => handleSubmit()}
     disabled={isDisabled}
   ></Button>
   

完整修复后的MyForm代码 #

const MyForm = ({ navigation, ...props }) => {
  const [windowType, setWindowType] = useState(props.windowType || '');
  const [price, setPrice] = useState(props.price || 0);

  const isDisabled = !(price != 0 && windowType.length > 1);

  const handlePrice = (enteredPrice) => {
    setPrice(enteredPrice);
  };

  const handleType = (enteredText) => {
    setWindowType(enteredText);
  };

  const handleSubmit = () => {
    props.onFormSubmit({
      id: props.id,
      windowType,
      price,
    });
    setWindowType('');
    setPrice(0);
    // 其他值重置
  };

  return (
    <FormWrapper>
      // ....
      <Button
        title="Save"
        onPress={() => handleSubmit()}
        disabled={isDisabled}
      ></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>
  );
};

内容的提问来源于stack exchange，提问作者Mike Haslam