为何使用Ant Design InputNumber退格清空时onChange事件未触发

该现象为Ant Design InputNumber的内置逻辑特性，和基础代码的语法无关，核心偏差来自两点：

• InputNumber的onChange触发条件并非监听输入框的文本改动，而是监听经过组件数字校验后的合法值的变化。很多场景下回调并非完全没有触发，只是输入清空时返回值从数字变成了null，和你预期的空字符串/数字格式不一致，才会产生事件没有被调用的错觉。
• 出现完全不触发的表现，通常是以下场景导致：
  • 未做完整受控绑定，没有将onChange返回的新值同步回组件的value属性，导致组件内部状态和外部状态不同步
  • 组件初始合法值已经为null，尚未输入过有效数字就直接删除内容，此时合法值未发生变化，自然不会触发onChange
• 额外说明：你代码中传入的type="number"是冗余配置，InputNumber内部已经封装了完整的数字输入校验逻辑，该属性不会被组件识别生效。

• 采用完整受控模式绑定组件，确保外部维护的状态和组件内部合法值完全同步，示例代码：

  const [numValue, setNumValue] = useState(null);
  
  <InputNumber
    value={numValue}
    onChange={(validVal) => {
      // 输入清空时validVal会返回null，此时回调可正常触发
      setNumValue(validVal);
      // 调用你业务层的处理逻辑
      onChange(validVal);
    }}
  />
  

• 排查业务回调逻辑：不要在onChange内部对清空时返回的null值做强制拦截、强行回写原有数字的操作，否则会导致组件显示内容和实际状态不一致，后续出现触发异常。
• 如果需要捕捉输入过程中的半状态文本变化，可以配合parser、formatter属性做增强，常规数字输入场景下，上述受控模式已经可以正常捕获清空状态的回调值。

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