处理输入类型 = 数字的 onChange [重复]答案

【问题标题】：Handle onChange on input type=number [duplicate]处理输入类型 = 数字的 onChange [重复]
【发布时间】：2021-10-23 22:26:15
【问题描述】：

默认状态是一个数字，默认状态的加减运算按预期工作。当通过在输入字段中键入数字更改输入值时，状态将更改为字符串。这里有什么问题？

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} />
)

【问题讨论】：

标签： javascript html reactjs input setstate

【解决方案1】：

这里有什么问题？

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

【讨论】：

【解决方案2】：

基于this:

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

要解决此问题，有一些方法。但是我建议你把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>
  );

【讨论】：