React TS点击按钮后输入框值未同步更新的问题求助

问题根源 #

你当前把输入框的value直接绑定到了count状态，导致输入框内容和计数器数值强绑定——输入数字后，输入框会一直同步显示count的当前值，自然没法自动清空。

解决方案 #

把输入框的状态和计数器状态分开管理，让输入框有自己的独立状态，完成输入后再将数值同步给计数器并清空输入框：

修改后的完整代码 #

import React, { useState } from 'react';

const App: React.FC = () => {
    const [count, setCount] = useState<number>(0);
    // 新增输入框专属状态
    const [inputValue, setInputValue] = useState<string>("");

    const increaseHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setCount(count + 1);
    };

    const decreaseHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setCount(count - 1);
    };

    const resetHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setCount(0);
    };

    // 仅更新输入框状态
    const changeInputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(event.target.value);
    };

    // 同步输入值到计数器并清空输入框
    const syncInputToCount = () => {
        const inputNum = parseInt(inputValue, 10);
        // 处理非数字输入的情况，避免计数器变成NaN
        setCount(isNaN(inputNum) ? 0 : inputNum);
        setInputValue("");
    };

    return (
        <form>
            <div>{count}</div>
            <section style={{ display: "flex", flexDirection: "row", gap: "8px" }}>
                <button onClick={increaseHandler}>increase</button>
                <button onClick={resetHandler}>reset</button>
                <button onClick={decreaseHandler}>decrease</button>
            </section>
            <input
                value={inputValue}
                onChange={changeInputHandler}
                type="number"
                placeholder="输入数字"
                // 按下回车快速提交
                onKeyDown={(e) => {
                    if (e.key === "Enter") {
                        e.preventDefault();
                        syncInputToCount();
                    }
                }}
                style={{ marginTop: "8px" }}
            />
            {/* 可选：添加提交按钮 */}
            <button 
                type="button" 
                onClick={syncInputToCount}
                style={{ marginLeft: "8px" }}
            >
                提交
            </button>
        </form>
    );
};

export default App;

额外优化说明 #

1. 给输入框加type="number"，限制只能输入数字，减少无效输入
2. 加入了非数字输入的判断，避免输入字母/符号导致计数器变成NaN
3. 支持两种提交方式：按下回车或点击提交按钮，输入后都会自动清空输入框

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