React数字类型状态变量初始化及输入框警告疑问

1. 输入框接收null作为value时为何抛出警告？ #

React对受控输入组件的value属性有明确的取值规范：仅允许字符串、数字或undefined（用于非受控组件场景）。null不在合法取值范围内，因此React会抛出警告，同时给出合规的替代方向：用空字符串''实现组件清空效果（受控模式下），或用undefined让组件处于非受控状态。

2. 数字类型的状态变量应使用什么值初始化？ #

结合你“初始不显示0”的需求，推荐两种适配React规范的方案：

• 用空字符串''初始化：这是受控组件的标准做法，输入框初始为空，后续在需要使用数字的场景下，将字符串转换为数字即可。示例代码：

  const [amount, setAmount] = useState('');
  
  const handleChange = (e) => {
    const inputValue = e.target.value;
    // 可在这里添加数字校验逻辑，比如限制仅输入数字相关内容
    setAmount(inputValue);
  };
  
  // 在提交或使用数值时转换为数字
  const handleConfirm = () => {
    const numAmount = Number(amount) || 0; // 空字符串可转为0，可根据需求调整
    // 后续业务逻辑
  };
  

• 用undefined初始化：适合非受控组件场景，输入框初始为空，需通过ref获取输入值，但这种方式需要手动处理状态同步，更适合无需实时控制输入内容的场景。

优先推荐第一种方案，既能满足初始为空的需求，又完全符合受控组件的规范，可避免React警告。

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