时间戳

首页 > 解决方案 > 在 React 和 Vanilla Javascript 的数字输入中键入 `e` 时不会调用 onChange

javascript - 在 React 和 Vanilla Javascript 的数字输入中键入 `e` 时不会调用 onChange

问题描述

type="number"在 React 中处理输入字段时，我发现了一个奇怪的行为。我有一个非常简单的 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 模拟相同的行为，但change只有当我使用箭头键增加/减少数字时才会调用事件。这是[相同的codepen示例] [1]

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

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

  1. onChange为什么当我输入e'+'、'-' 和 '.'时React 不调用 ?
  2. 为什么change当我在 Vanilla Javascript 中输入一些值时不调用事件？[1]：https ://codepen.io/aditya81070/pen/WNjoLao

标签： javascriptreactjsdom-events

解决方案

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

推荐阅读