React计数器从输入框取值后加号按钮异常，减号正常求助

问题现象 #

通过输入框输入数值并点击Enter按钮设置后，点击“+”按钮无法正常递增1，而是出现字符串拼接（比如输入5后点+变成51），但“-”按钮可正常递减；未通过输入框设置时，“+”“-”按钮都正常工作。

问题代码 #

import React, { useState, useRef } from "react";

function App() {
  var [count, setCount] = useState(0);
  function handleClick() {
    setCount(inputRef.current.value);
  }

  function decrease() {
    setCount(count - 1);
  }
  function increase() {
    setCount(count + 1);
  }
  const inputRef = useRef(null);

  
  return (
    <div className="container">
      <input ref={inputRef} type="text" id="message" name="message"></input>
      <button onClick={handleClick}>Enter</button>
      <h1>{count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>

    </div>
  );
}
export default App;

问题原因 #

输入框的value属性默认是字符串类型，点击Enter后直接把字符串赋值给了count状态。此时：

• 执行count + 1时，JS会把数字1转成字符串做拼接操作，所以出现类似"5"+1="51"的结果；
• 执行count - 1时，JS会自动把字符串转成数字做减法，所以"5"-1=4能正常工作；
• 初始状态count是数字0，所以未输入时+操作是数字相加，表现正常。

解决方法 #

1. 输入值转数字后再设置状态

修改handleClick函数，把输入值转为数字：

function handleClick() {
  // 使用Number()或parseInt()转换输入值，空值或非数字默认设为0
  setCount(Number(inputRef.current.value) || 0);
}

2. 优化输入框类型（可选）

把输入框的type改成number，限制只能输入数字，同时更符合数值输入场景：

<input ref={inputRef} type="number" id="message" name="message" />

3. 使用函数式更新（推荐，避免闭包问题）

当状态更新依赖于前一个状态时，使用函数式更新更可靠，同时也能兼容类型转换后的状态操作：

function decrease() {
  setCount(prevCount => prevCount - 1);
}
function increase() {
  setCount(prevCount => prevCount + 1);
}

修改后的完整代码 #

import React, { useState, useRef } from "react";

function App() {
  const [count, setCount] = useState(0);
  const inputRef = useRef(null);

  function handleClick() {
    setCount(Number(inputRef.current.value) || 0);
  }

  function decrease() {
    setCount(prevCount => prevCount - 1);
  }

  function increase() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div className="container">
      <input ref={inputRef} type="number" id="message" name="message" />
      <button onClick={handleClick}>Enter</button>
      <h1>{count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>
    </div>
  );
}
export default App;

内容的提问来源于stack exchange，提问作者joe