React中输入0不被识别为有效值的问题排查与解决

我用Material UI搭建了一个表单，设置提交按钮在所有字段填写完成前禁用。但遇到问题：部分字段需要输入0值，仅输入0时按钮不会启用，输入其他内容才会生效。相关代码如下，疑惑!values.xxx是否应该仅在值为null或undefined时禁用按钮？0理应被算作有效值，请问问题出在哪及如何修正？

const disabled = (!values.name || !values.avgRunTime || !values.avgSetupTime);


const handleInputChange = e => {
    const { name, value } = e.target;
    setValues({
        ...values,
         [name]: ( typeof value === 'string' ? (value).replace(/ +(?= )/g, '').trimStart() : value ) 
    });
};


<Form onSubmit={handleSubmit} >
       <Input
            type='text'
            onChange={handleInputChange}
            name='name'
            label='Name'
            value={values.name}
       />

       <Input
           type='text'
           onChange={handleInputChange}
           name='avgRunTime'
           label='Avg. Run Time'
           value={values.avgRunTime} 
      />

      <Input
           type='text'
           onChange={handleInputChange}
           name='avgSetupTime'
           label='Avg. Setup Time'
           value={values.avgSetupTime}
      />

      <Button
          type='submit'
          text='Submit'
          onClick={handleSubmit}
          disabled={disabled}
      />
  </Form>
);
}

问题原因 #

问题出在!values.xxx的判断逻辑上——JavaScript里的!运算符会把所有falsy值（包括0、空字符串''、null、undefined、false等）都判定为true。如果你的avgRunTime或avgSetupTime最终被存储为数字0，!0会返回true，导致disabled保持为true，按钮依然禁用。即使是字符串'0'，如果初始值是空字符串''，当只输入0时，若其他字段未填全也会触发错误禁用，但核心还是!的模糊判断不符合你允许0作为有效值的需求。

解决方案 #

你需要精确判断字段是否为未定义（undefined）、空值（null）或空字符串（''），把0这类合法值排除在禁用条件外。以下是几种可行的修改方式：

方式1：精确判断所有字段状态 #

// name字段需要非空字符串；avgRunTime和avgSetupTime允许0（无论字符串还是数字类型）
const disabled = (
  values.name === null || values.name === undefined || values.name === '' ||
  values.avgRunTime === null || values.avgRunTime === undefined || values.avgRunTime === '' ||
  values.avgSetupTime === null || values.avgSetupTime === undefined || values.avgSetupTime === ''
);

方式2：针对数字类型字段简化判断 #

如果你的avgRunTime和avgSetupTime是数字类型（比如在onChange时会把输入转成数字），可以简化为：

const disabled = (
  values.name === null || values.name === undefined || values.name === '' ||
  values.avgRunTime === null || values.avgRunTime === undefined ||
  values.avgSetupTime === null || values.avgSetupTime === undefined
);

方式3：配合输入处理简化判断 #

可以在onChange时把空字符串转为undefined，进一步简化禁用判断：

// 修改输入处理逻辑：空字符串转为undefined
const handleInputChange = e => {
    const { name, value } = e.target;
    let processedValue = value;
    if (typeof value === 'string') {
      processedValue = value.replace(/ +(?= )/g, '').trimStart();
      // 处理后为空字符串则设为undefined
      if (processedValue === '') {
        processedValue = undefined;
      }
    }
    setValues({
        ...values,
        [name]: processedValue
    });
};

// 此时禁用判断可简化为：
const disabled = (
  values.name === undefined || 
  values.avgRunTime === undefined || 
  values.avgSetupTime === undefined
);

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