在 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 模拟相同的行为,但是只有当我使用箭头键增加/减少数字时才会调用 change
事件。这是[相同的codepen示例][1]
有人可以解释这种行为吗?我如何检测到在数字输入中输入 e
?
编辑:
我认为这个问题有些困惑。我想了解有关数字输入字段的 change
事件行为的两件事。
- 为什么当我键入
e
、“+”、“-”和“.”时 React 不调用onChange
? - 为什么当我在 Vanilla Javascript 中输入一些值时,
change
事件没有被调用? [1]: https://codepen.io/aditya81070/pen/WNjoLao
最佳答案
任何以 e 结尾的文本都不是数字。
它类似于 1e3
或 2e4
。
因此,如果您的号码以 1e
结尾,则该号码无效。 Javascript 阻止您这样做,这就是为什么在您的 native 代码和 react 中,尽管触发了 onChange(/onchange) e.target.value
是“”。所以你不能使用它。
关于javascript - 在 React 和 Vanilla Javascript 中输入数字 `e` 时不会调用 onChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68357012/