React函数组件onChange校验数字输入清空报错解决方法

原代码存在4个直接触发问题的写法错误：

• 从event.target解构取值时误用了不存在的checkedValue属性，普通输入框的实时输入值存放在value属性中
• 直接对未声明的value变量赋值，直接触发ReferenceError引用错误
• 未处理输入框清空时值为空字符串的场景，空值转数字后为NaN，会导致范围校验逻辑完全失效
• 校验计算出的合法值没有同步写入状态，原代码直接将未校验的原始输入存入state，校验逻辑未实际生效

保留实时校验能力、兼容清空输入操作的完整实现如下：

const [formData, setFormData] = React.useState({
  userTeamChosen: "",
  eventNumber: 0,
  value: 0,
  ethValue: 0
})

function handleNumeric(event) {
  const { name, value: inputValue, min, max } = event.target
  // 输入清空时直接同步空状态，跳过数值校验，避免空值转换异常
  if (inputValue === "") {
    setFormData(prevFormData => ({...prevFormData, [name]: ""}))
    return
  }
  // 有效数值输入时执行范围钳制，确保值落在min-max区间内
  const numValue = Number(inputValue)
  const validValue = Math.max(Number(min), Math.min(Number(max), numValue))
  setFormData(prevFormData => ({...prevFormData, [name]: validValue}))
}

// 可选补充：失焦时兜底校验，避免空值被提交
function handleInputBlur(event) {
  const { name, value, min } = event.target
  if (value === "") {
    setFormData(prevFormData => ({...prevFormData, [name]: Number(min)}))
  }
}

<input
  type="number"
  name="value"
  value={formData.value}
  onChange={handleNumeric}
  onBlur={handleInputBlur}
  min="5"
  max="10000000"
/>

• 单独分支处理输入为空的场景，清空输入时不做数值转换和范围计算，完全避免空值导致的类型错误、引用错误
• 修正原代码的取值错误，正确获取输入框实时值
• 校验后的合法值直接写入状态，保证输入过程中值始终被约束在指定区间内
• 补充的失焦兜底逻辑兼顾输入流畅度：用户清空输入重新输入的过程中不会被强制回填数值打断操作，失焦时如果仍为空则自动填充最小值，保证提交数据合法

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