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>
  );
}

複製程式碼

線上地址codesandbox.io/s/reactinpu…

原因查詢

首先確認問題是 setState 未成功，還是 react-dom 未更新。經過除錯輸出發現， state 已經更新，那麼問題應該出在 react-dom 裡面，檢視 react-dom 程式碼找到 unstable_interactiveUpdates 方法，通過斷點除錯，一步步找到問題所在點。

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>
  );
}

複製程式碼