react input[type='number']

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

示例代码以下：react

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

在线地址codesandbox.io/s/reactinpu…markdown

缘由查找

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

node.value = '01';
value = 1
复制代码

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

问题解决

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

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