在 React 和 Vanilla 的数字输入中键入“e”时不会调用 onChange Javascript

Question

我在 React 中使用 type="number" 处理输入字段时发现了一个奇怪的行为。我有一个非常简单的 React 组件，带有一个受控数字输入字段，并且由于 e.target.value 始终是一个字符串，我正在解析它以使其成为一个数字。

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

  const handleInputChange = (e) => {
    const input = e.target.value;
    console.log(input);
    const parsedValue = parseInt(input, 10);
    console.log(parsedValue);
    setValue(isNaN(parsedValue) ? input : parsedValue);
  };
  return (
      <form>
        <input
          type="number"
          min={1}
          max={100}
          value={value}
          pattern="\d+"
          onChange={handleInputChange}
        />
      </form>
  );
}

每次输入新值时都会调用handleInputChange函数，但在输入字符e、'+'或.时不会调用它。对于 +、. 和 -，我知道我们希望在此之后有一些数字，因此调用 onChange 没有多大意义，但对于 e，它应该已调用 onChange.

我试图用 vanilla javascript 模拟相同的行为，但是只有当我 increase/decrease 使用箭头键的数字时才会调用 change 事件。这是相同的 [codepen 示例][1]

有人可以解释这种行为吗？我如何检测在数字输入中键入 e？

编辑：我认为这个问题有些混乱。我想了解有关数字输入字段的 change 事件行为的两件事。

为什么当我键入 e、“+”、“-”和“.”时 React 不调用 onChange ？
当我在 Vanilla Javascript 中输入一些值时，为什么 change 事件没有被调用？ [1]: https://codepen.io/aditya81070/pen/WNjoLao

Answer 1

任何以 e 结尾的文本都不是数字。就像 1e3 或 2e4。因此，如果您的号码以 1e 结尾，则该号码无效。 Javascript 阻止你这样做，这就是为什么在你的本机代码和反应中，尽管 onChange(/onchange) 被触发 e.target.value 是“”。所以你不能使用它。

在 React 和 Vanilla 的数字输入中键入“e”时不会调用 onChange Javascript

onChange is not called when typing `e` in number input in React and Vanilla Javascript

javascript

dom-events

reactjs