最近在写业务的时候遇到一个坑，当用户在 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>
);
}
