React的Input type="number"字段不触发onChange事件。

Question

我已经向表单中添加了 <input type="number" value={value} onChange={onChange}>，并使用下面的组件中简化的 onChange 函数来检查输入格式：

  export function App() {
    const [value, setValue] = useState("");

    const onChange = (event) => {
      console.log("onChange called", event.target.value);
      setValue(event.target.value);
    };

    return <input type="number" value={value} onChange={onChange} />;
 }

我想使用onChange函数中的验证，将输入值限制为整数。

但是，在我添加验证之前，我注意到当用户输入一个有效的非整数数字输入时，例如。，e或E，输入的值不会传递给onChange函数，因此我无法执行我的验证。

以下是可以用来重现此问题的codesandbox。

什么是确保输入为整数的最佳验证方式？

- Tejogol

---

这就是在输入字段中添加 type='number' 属性的整个目的。HTML 会为您解决这个问题。浏览器会为您解决这个问题。你为什么需要自己验证呢？ - Prateek Thapa

Answer 1

e 是数字字段中唯一被接受的字母，因为它允许指数操作。您可以使用 input type="text"，但这样做无法获得浏览器本机的上下箭头，而 type="number" 可以实现。而且，pattern 属性只会在提交时进行验证，但不能阻止用户在输入框中输入'e'字母。在 React 中，您可以使用以下方法完全屏蔽数字输入框中的 'e' 键：

const [symbolsArr] = useState(["e", "E", "+", "-", "."]);
  return (
    <div className="App">
      <input
        type="number"
        onKeyDown={e => symbolsArr.includes(e.key) && e.preventDefault()}
      />
    </div>
  );

Codesandbox演示

- Randall

---

当我在onKeyDown上添加console.log时，什么也没有发生。 - Aljohn Yamaro

@AljohnYamaro 复制 codesandbox 链接并查看演示。一切都正常。 - Randall

我重新检查了演示，它可以正常工作，抱歉我会更新我的内容以获得点赞。 - Aljohn Yamaro

无法更新，显示“您在8小时前对此答案进行了投票。除非编辑此答案，否则您的投票现已锁定。” - Aljohn Yamaro