reactjs - React Input type="number" 字段不会触发 onChange

问题描述

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

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

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

标签： reactjsinputonchange

Thee是数字字段中唯一接受的字母，因为它允许使用指数。您可以使用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演示

reactjs - React Input type="number" 字段不会触发 onChange

问题描述

解决方案

推荐阅读