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 函数中使用验证将输入值限制为仅整数。

但是，在添加验证之前，我注意到当用户输入有效的 non-integer 数字输入时，例如 .、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 演示

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

React Input type="number" fields don't trigger onChange

reactjs

input

onchange