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> ); } 複製代碼