React中如何实现点击图标触发更新的输入框内计数器？

你的代码存在两个核心问题，直接导致点击图标无法更新计数器：

1. 点击事件绑定错误：onClick={addAmountCart(amount)}会在组件渲染时立即执行函数，而非点击图标时触发。需要用正确的方式绑定点击回调。
2. 未正确更新状态：addAmountCart仅返回计算后的值，但未调用setAmount修改amount的状态，无法触发组件重新渲染更新计数器。

另外，输入框的onChange会将值转为字符串，后续做加法会出现字符串拼接问题，需要转为数字类型。

修改后的代码如下：

import * as C from './styles';
import { useState } from 'react';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; // 假设使用Material UI图标

const Cart = () => {
    // 直接在函数内处理状态更新，无需传参
    const addAmountCart = () => {
        // 用函数式更新确保基于最新状态计算，避免异步更新偏差
        setAmount(prevAmount => prevAmount + 1);
    }

    const [amount, setAmount] = useState(1);

    return (
        <C.Container>
            {/* onChange时将输入值转为数字，避免字符串拼接 */}
            <input 
                type="text" 
                value={amount}  
                onChange={e => setAmount(Number(e.target.value))}
            />
            {/* 直接绑定函数，点击时才执行 */}
            <AddCircleOutlineIcon id='add' onClick={addAmountCart}/>
        </C.Container>
    )
}

export default Cart;

关键修改说明： #

• 补全依赖导入：补上useState和图标组件的导入（若使用第三方图标库）。
• 修正点击绑定：将onClick={addAmountCart(amount)}改为onClick={addAmountCart}，确保仅在点击时触发函数。
• 优化状态更新：使用函数式更新setAmount(prevAmount => prevAmount + 1)，保证每次都基于最新状态计算。
• 处理输入值类型：onChange时用Number()转换输入值，避免出现"1"+1="11"的错误。

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