React Input type =“ number”字段不会触发onChange

编程问答 2022-06-11

问题描述

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

下面是一个可用来重现该问题的代码框。

Example

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

解决方法

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

inputinputonchangeonchangereactjsreactjsreactjsreactjs