React JS中如何通过按钮与键盘更新输入框的值

你这段代码有几个小问题，导致输入框手动更新功能异常，下面是修正后的完整代码：

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);
    const increase = () => setCount(prev => prev + 1);
    const decrease = () => setCount(prev => prev - 1);

    const handleInputChange = (e) => {
        const inputValue = Number(e.target.value);
        setCount(isNaN(inputValue) ? 0 : inputValue);
    };

    return (
        <div>
            <div>
                <button onClick={increase} className='bg-green-700 w-12 border-2'>+</button>
                <input 
                    onChange={handleInputChange} 
                    value={count} 
                    className='border-2 text-center' 
                    type="number" 
                    name="count" 
                    id="count" 
                />
                <button onClick={decrease} className='bg-rose-700 w-12 border-2'>-</button>
            </div>
        </div>
    );
}

核心修改说明： #

1. 解决类型错误：输入框返回的value是字符串，直接赋值会让count变成字符串类型——比如你输入2再点加号，会变成"21"而不是3。现在用Number()把输入转成数字，非数字输入直接设为0。
2. 去掉没用的onKeyUp：原代码里onKeyUp={(event) => {manual}}根本没调用manual函数，而且onChange已经能实时响应输入变化，完全不需要这个事件。
3. 用函数式更新状态：按钮的加减操作改用prev => prev +1这种写法，避免快速点击时因为闭包导致的计数不准问题。
4. 规范变量名：把setcount改成setCount，符合React的小驼峰命名习惯，代码更易读。
5. 补全useState导入：原代码没写导入语句，实际运行会报错，必须加上。

改完之后，不管是点按钮加减，还是手动输入数字，计数器都能正常工作了。

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