React JS组件传值：CommonCombo选中值如何传给EmployeeList

要解决CommonCombo组件选中值回传并实现数据过滤的问题，核心是通过父组件传递回调函数的方式，让子组件把选中值传递回父组件，再在父组件中根据筛选条件处理数据。以下是具体修改步骤和代码：

1. 修改CommonCombo组件，接收父组件的回调 #

让CommonCombo组件通过props接收一个回调函数，当下拉框选中值变化时，调用这个函数把选中值传递给父组件。

function CommonCombo(props) {
    const handleCombo = (selectedValue) => {
        // 调用父组件传入的回调，传递选中值
        props.onChange(selectedValue);
    };

    return (
        <div>
            <div className={classes.divWidth}>
                <Combobox                
                    data={props.data}
                    defaultValue={props.data[0]}
                    onChange={handleCombo}
                />
            </div>
        </div>
    );
}

export default CommonCombo;

2. 修改EmployeeList组件，维护筛选状态并实现过滤逻辑 #

在EmployeeList中添加筛选状态，接收CommonCombo传递的选中值，再根据条件过滤原始数据。

import { useState, useEffect } from 'react';
import CommonCombo from './CommonCombo';
import { nanoid } from 'nanoid';

function EmployeeList(props) {
    // 存储原始员工数据，避免过滤时依赖props.data导致的异常
    const [originalData, setOriginalData] = useState(props.data);
    // 存储筛选后的展示数据
    const [filteredData, setFilteredData] = useState(props.data);
    // 两个筛选条件的选中值状态
    const [selectedDept, setSelectedDept] = useState("-SELECT-");
    const [selectedLocation, setSelectedLocation] = useState("-SELECT-");

    // 生成部门选项列表
    const departmentCodes = [...new Set(originalData.map(item => item.department))];
    departmentCodes.push("-SELECT-");
    departmentCodes.sort();

    // 生成地点选项列表
    const locationCodes = [...new Set(originalData.map(item => item.factoryLocation))];
    locationCodes.push("-SELECT-");
    locationCodes.sort();

    // 监听筛选条件变化，自动执行过滤
    useEffect(() => {
        let result = [...originalData];

        // 过滤部门：选中非默认值时，筛选对应部门
        if (selectedDept !== "-SELECT-") {
            result = result.filter(item => item.department === selectedDept);
        }

        // 过滤地点：选中非默认值时，筛选对应地点
        if (selectedLocation !== "-SELECT-") {
            result = result.filter(item => item.factoryLocation === selectedLocation);
        }

        setFilteredData(result);
    }, [selectedDept, selectedLocation, originalData]);

    // 监听父组件传入的原始数据变化，同步更新本地状态
    useEffect(() => {
        setOriginalData(props.data);
        setFilteredData(props.data);
    }, [props.data]);

    return (
        <div>
            <div>
                <table className={classes.table}>
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Employee Name</th>
                            <th>
                                Department
                                <CommonCombo
                                    data={departmentCodes}
                                    onChange={(value) => setSelectedDept(value)}
                                />
                            </th>
                            <th>
                                Factory Location
                                <CommonCombo
                                    data={locationCodes}
                                    onChange={(value) => setSelectedLocation(value)}
                                />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {filteredData.map(ele => (
                            <tr key={nanoid()}>
                                <td>{ele.id}</td>
                                <td>{ele.employeeName}</td>
                                <td>{ele.department}</td>
                                <td>{ele.factoryLocation}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

export default EmployeeList;

关键修改说明 #

• 回调传递：CommonCombo通过props.onChange把选中值传给EmployeeList，父组件通过setSelectedDept/setSelectedLocation更新筛选状态
• 数据过滤：用useEffect监听筛选状态变化，每次状态更新时自动过滤原始数据，得到要展示的filteredData
• 状态隔离：把原始数据存在originalData中，避免过滤操作修改原始数据源，同时兼容父组件更新数据的场景

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