React中如何获取表格的所有选中行数据？

不用状态管理库的话，有几种React原生方案可以实现，最常用的是状态提升，另外还有用useRef的方式，具体如下：

方案一：状态提升（推荐） #

把选中项的状态统一放在父组件TableComp中维护，子组件TableRowItem只负责接收选中状态和触发状态更新的回调，完全遵循React的单向数据流。

修改后的代码如下：

父组件 TableComp #

import { useState } from 'react';

export default function TableComp() {
    // 用Set存储选中的item id（假设item有唯一id属性）
    const [selectedIds, setSelectedIds] = useState(new Set());

    // 处理子组件的选中状态切换
    const handleRowToggle = (itemId) => {
        setSelectedIds(prev => {
            const newSet = new Set(prev);
            newSet.has(itemId) ? newSet.delete(itemId) : newSet.add(itemId);
            return newSet;
        });
    };

    // 点击按钮时处理选中项
    function handleSelectedRows() {
        // 筛选出所有选中的条目
        const selectedItems = items.filter(item => selectedIds.has(item.id));
        console.log('选中的项：', selectedItems);
        // 在这里执行你的业务操作
    }

    return (
        <>
            <Table>
                ...
                {items.map(item => (
                    <TableRowItem 
                        key={item.id}
                        item={item}
                        isActive={selectedIds.has(item.id)}
                        onToggle={() => handleRowToggle(item.id)}
                    />
                ))}
            </Table>
            <Button onClick={handleSelectedRows}>处理选中项</Button>
        </>
    )
}

子组件 TableRowItem #

function TableRowItem({item, isActive, onToggle}) {
    // 子组件不再维护自身选中状态，完全由父组件控制
    return (
        <TableRow onClick={onToggle} active={isActive}>...</TableRow>
    )
}

这种方式的优势是状态集中管理，逻辑清晰，父组件能随时获取最新选中状态，还能方便扩展全选、反选等功能。

方案二：使用useRef存储选中状态 #

如果你的场景不需要根据选中状态实时更新UI（仅在点击按钮时一次性获取选中项），可以用useRef在父组件中存储选中状态，子组件点击时直接更新ref内容：

父组件 TableComp #

import { useRef } from 'react';

export default function TableComp() {
    // 用对象存储选中状态，键为item id，值为是否选中
    const selectedRef = useRef({});

    const handleRowToggle = (itemId) => {
        selectedRef.current[itemId] = !selectedRef.current[itemId];
    };

    function handleSelectedRows() {
        // 筛选出所有选中的条目
        const selectedItems = items.filter(item => selectedRef.current[item.id]);
        console.log('选中的项：', selectedItems);
        // 执行你的业务操作
    }

    return (
        <>
            <Table>
                ...
                {items.map(item => (
                    <TableRowItem 
                        key={item.id}
                        item={item}
                        onToggle={() => handleRowToggle(item.id)}
                    />
                ))}
            </Table>
            <Button onClick={handleSelectedRows}>处理选中项</Button>
        </>
    )
}

子组件 TableRowItem #

import { useState } from 'react';

function TableRowItem({item, onToggle}) {
    // 子组件自身维护选中状态用于UI展示
    const [active, setActive] = useState(false);

    function handleClick() {
        const newActive = !active;
        setActive(newActive);
        onToggle(item.id); // 通知父组件更新ref
    }

    return (
        <TableRow onClick={handleClick} active={active}>...</TableRow>
    )
}

这种方式的缺点是ref更新不会触发组件重渲染，父组件无法实时感知选中状态变化，仅适合不需要实时同步UI的场景。

总结 #

优先选择状态提升方案，它符合React设计理念，代码可维护性高；如果是特殊场景（无需实时同步UI），可以考虑useRef的方式。

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