react input[type='number']

最新推荐文章于 2025-06-10 09:06:03 发布

weixin_34068198

最新推荐文章于 2025-06-10 09:06:03 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cdd2decf265da03b57b7ef0

本文探讨了在React中使用input[type='number']时遇到的一个有趣现象：即使更新了state，值显示仍保持不变的问题。深入研究了React DOM的更新机制，并提供了一个简单而有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

复制代码