在输入类型=数字时处理 onChange

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

基于：

The purpose of the number type is that mobile browsers use this for showing the right keyboards and some browsers use this for validation purposes.

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

  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

What's wrong here?

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，但是你可以按你的方式处理

在输入类型=数字时处理 onChange

Handle onChange on input type=number

html

javascript

input

setstate

reactjs