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 函数，因此我无法执行验证。

以下是可用于重现问题的代码框。

向输入字段添加验证以确保输入是整数的最佳方法是什么？

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演示