Handle onChange on input type=number

Question

默认状态是一个数字，从默认状态中加减可以正常工作。当通过在输入字段中键入数字来更改输入值时，状态将更改为字符串。这是怎么了?

const [value, setValue] = useState(1);
const handleChange = e => {
setValue(e.target.value)
}
const handleAdd = () => {
setValue(value+1)
}
const handleSubtract = () => {
setValue(value-1)
}
return (
<input type='number' value={value} onChange={handleChange} />
<button label='+' onClick={handleAdd} />
<button label='-' onClick={handleSubtract} />
)

Answer 1

基于此:

number类型的目的是移动浏览器使用它来显示正确的键盘，有些浏览器使用它来进行验证。

要解决这个问题，有一些方法。但是我建议你把onChange时的值改为parseInt。所以:

const [value, setValue] = useState(1);
const handleChange = (e) => {
setValue(parseInt(e.target.value));
};
const handleAdd = () => {
setValue((prev) => prev + 1);
};
const handleSubtract = () => {
setValue((prev) => prev - 1);
};
return (
<div>
<input type="number" value={value} onChange={handleChange} />
<button label="+" onClick={handleAdd} />
<button label="-" onClick={handleSubtract} />
</div>
);

Answer 2

这是怎么回事?

e。target。Value是一个字符串，即使你输入一个数字，你也会在事件

中得到一个字符串。

setValue(e.target.value)

你的状态现在有一个字符串在里面

setValue((prev) => prev - 1);

你的加法和减法方法现在处理字符串和数字，你现在是强制的受害者https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839/

'2' + 1 = 21，所以当你的状态变成字符串后，你的代码将不能像你想的那样工作

您需要使用另一个答案中所写的parseInt，或者以您想要的任何方式进行解析，但始终确保您的状态具有您想要的类型

const handleChange = e => {
setValue(Number(e.target.value) || 0)
}

这是另一种方式，请注意，当解析一个不能变成NaN的字符串时，上面的代码将使它变成0，但您可以按自己的方式处理