react input[type='number']

最近在写业务的时候遇到一个坑，当用户在 input[type='number'] 中输入 “01” 时，我将值设置为 1 ，但它不起作用，它仍显示 “01”。

示例代码如下：

function App() {
  const [state, setState] = useState(0);
  return (
    <div className="App">
      <input type="number" value={state} onChange={e=>{
        setState(Number(e.target.value))
      }} />
    </div>
  );
}

在线地址https://codesandbox.io/s/reactinputtypenumber-1kd5r

原因查找

首先确认问题是 setState 未成功，还是 react-dom 未更新。经过调试输出发现， state 已经更新，那么问题应该出在 react-dom 里面，查看 react-dom 代码找到 unstable_interactiveUpdates 方法，通过断点调试，一步步找到问题所在点。

react-input-number-code.png

node.value = '01';
value = 1

node.value != value 结果是 false，从而导致node未更新。

问题解决

那么解决方案就很简单了，我们只需要设置 value 为 ‘1’， 这样字符串之间的比对，就可以更新node了。

function App() {
  const [state, setState] = useState(0);
  return (
    <div className="App">
      <input type="number" value={state} onChange={e=>{
        setState('' + Number(e.target.value))
      }} />
    </div>
  );
}