React.js中实现点击按钮取消对应复选框选中状态的问题

当前实现中，点击选中项对应的Badge按钮无法触发正确的取消逻辑，原因是Badge的点击事件对象并非复选框元素，原handleCheck函数依赖复选框的checked属性和event.target.value，无法适配Badge的点击场景。

解决方案：抽离核心逻辑，解耦事件依赖 #

把更新选中列表的核心逻辑从事件处理函数中抽离，让复选框和Badge共用同一套状态更新逻辑，同时给复选框绑定checked属性实现状态同步。

修改后的完整代码如下：

import { useState } from 'react';
import Badge from 'react-bootstrap/Badge';

const ListProduct = () => {
    // 存储选中项的数组
    const [checked, setChecked] = useState([]);

    // 核心逻辑：切换指定value的选中状态
    const toggleCheckedItem = (value) => {
        setChecked(prev => {
            if (prev.includes(value)) {
                // 移除已选中的项
                return prev.filter(item => item !== value);
            } else {
                // 添加新选中的项
                return [...prev, value];
            }
        });
    };

    // 复选框的change事件处理
    const handleCheck = (event) => {
        toggleCheckedItem(event.target.value);
    };

    // 渲染选中项的Badge列表
    const renderFilters = () => {
        return checked.map((item) => (
            <Badge 
                className="filter-list-indikator" 
                bg="secondary" 
                key={item} 
                onClick={() => toggleCheckedItem(item)}
            >
                {item}
            </Badge>
        ));
    };

    return (
        <div>
            {/* 复选框渲染示例 */}
            <div className="d-flex" key={1}>
                <input 
                    type="checkbox" 
                    onChange={handleCheck} 
                    value="3 Seater"
                    checked={checked.includes("3 Seater")} // 绑定选中状态
                />
                <label>3 Seater</label>
            </div>
            {/* 渲染选中的Badge */}
            <div className="filter-badges">
                {renderFilters()}
            </div>
        </div>
    );
};

export default ListProduct;

关键修改说明 #

• 抽离toggleCheckedItem函数：不再依赖事件对象，直接接收要切换的value，负责更新选中状态数组，让复选框和Badge都能调用。
• 复选框绑定checked属性：通过checked={checked.includes("3 Seater")}将复选框状态与checked数组同步，点击Badge后复选框会自动更新状态。
• Badge的点击事件：直接调用toggleCheckedItem(item)，传入当前Badge对应的选中项值，触发移除逻辑。

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