如何在点击FilterChip关闭按钮时传递数据并完成对应操作？

当然可以通过onCloseClick传递对应数据，下面是具体修改步骤，帮你实现点击关闭后移除FilterChip、同步取消父组件复选框勾选的需求：

1. 修改FilterChip组件，传递当前项数据 #

在子组件的关闭点击事件中，把当前的textBody作为参数传给父组件的回调函数，让父组件能精准识别是哪个Chip被触发：

import CloseIcon from '@mui/icons-material/Close';
import "./FilterChip.css";

function FilterChip({textBody, onCloseClick}) {
    const handleClose = () => {
        // 点击关闭时，把当前Chip的textBody传递给父组件
        onCloseClick(textBody);
    };

    return <div className="filter-chip">
        Category: {textBody} 
        <CloseIcon onClick={handleClose} className="filter-chip-close-button"/>
    </div>
}

export default FilterChip;

2. 父组件处理回调并更新状态 #

父组件需要维护复选框的选中状态，在onChipCloseClick回调中接收子组件传来的textBody，从选中列表中移除该值，状态更新后对应的FilterChip会自动消失，同时复选框的勾选状态也会同步取消。

假设父组件用useState管理选中状态，示例代码如下：

import { useState } from 'react';
import FilterChip from './FilterChip';

function ParentComponent() {
    // 管理复选框选中状态的state
    const [checkedCategories, setCheckedCategories] = useState([]);

    // 获取选中的复选框列表
    const getCheckedBoxes = () => checkedCategories;

    // 处理Chip关闭的回调
    const onChipCloseClick = (targetCategory) => {
        // 从选中列表中移除当前分类，更新状态
        setCheckedCategories(prev => prev.filter(item => item !== targetCategory));
    };

    // 渲染FilterChips的函数
    function renderFilterChips() {
        const checkedBoxes = getCheckedBoxes();

        return checkedBoxes.map((checkedBox) => 
            <FilterChip key={checkedBox} textBody={checkedBox} onCloseClick={onChipCloseClick} />
        );
    }

    // 示例：渲染复选框列表（需根据你的实际分类列表调整）
    const allCategories = ["Electronics", "Clothing", "Home"];

    return (
        <div>
            {/* 复选框列表 */}
            <div className="checkbox-group">
                {allCategories.map(category => (
                    <label key={category}>
                        <input
                            type="checkbox"
                            checked={checkedCategories.includes(category)}
                            onChange={(e) => {
                                if (e.target.checked) {
                                    setCheckedCategories(prev => [...prev, category]);
                                } else {
                                    setCheckedCategories(prev => prev.filter(item => item !== category));
                                }
                            }}
                        />
                        {category}
                    </label>
                ))}
            </div>

            {/* 渲染FilterChip列表 */}
            <div className="filter-chips-wrapper">
                {renderFilterChips()}
            </div>
        </div>
    );
}

export default ParentComponent;

核心逻辑说明 #

• 子组件通过onCloseClick(textBody)把当前Chip的标识传递给父组件，解决了“父组件不知道哪个Chip被点击”的问题。
• 父组件只需要维护checkedCategories这一个状态：复选框的勾选状态、FilterChip的渲染列表都依赖这个状态，状态更新后UI会自动同步，无需手动操作DOM移除Chip。

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