React受控number输入框初始值为0时无法修改数值问题求助

核心原因是React受控组件的机制：只要input的value属性和绑定的state值不一致，React就会强制把input的显示值重置为state对应的值。你现在改不动输入框，本质就是onChange触发后，state的值根本没有更新到你输入的新内容，才会导致每次输入都被重置回初始的0。

常见错误场景 #

• 事件处理函数handleOnChangeSoda实现错误：比如没有正确从事件对象中读取输入值，甚至在函数里直接写死setValue(0)，导致不管用户输什么，state始终是0。
• 未兼容输入空值的转换逻辑：比如直接写setValue(Number(e.target.value))，当用户想删掉输入框里的0重新输入新数字时，输入框的空内容转成数字会返回0，相当于刚删掉内容就被自动填回0，根本没法输入其他数值。
• 误加了只读/禁用属性：比如给input标签误加了readOnly或者disabled，从你贴的代码片段看没有这类属性，大概率可以排除。

可直接复用的正确实现 #

// 状态初始化
const [value, setValue] = useState(0)

// 正确的事件处理逻辑
const handleOnChangeSoda = (e) => {
  const rawInput = e.target.value
  // 兼容空输入场景，避免卡死输入
  const nextValue = rawInput === '' ? '' : Number(rawInput)
  setValue(nextValue)
}

如果需要保证状态始终是数字类型、不出现空字符串的情况，可以调整逻辑，结合你设置的min="0"规则做边界处理：

const handleOnChangeSoda = (e) => {
  const rawInput = e.target.value
  // 输入为空时回退到最小值0，同时不会卡死输入
  setValue(rawInput === '' ? 0 : Math.max(0, Number(rawInput)))
}

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