如何基于Semantic UI React Table实现带全选Checkbox的行数据获取？

下面是一个完整的实现示例，包含表头全选、单行选择以及获取选中值的功能：

import React, { useState } from 'react';
import { Table, Checkbox, Button } from 'semantic-ui-react';

// 模拟表格数据
const tableData = [
  { id: 1, name: '张三', age: 28, department: '前端开发' },
  { id: 2, name: '李四', age: 32, department: '后端开发' },
  { id: 3, name: '王五', age: 26, department: '产品设计' },
  { id: 4, name: '赵六', age: 30, department: '测试运维' },
];

const SelectableTable = () => {
  // 管理选中的行ID数组
  const [selectedRowIds, setSelectedRowIds] = useState([]);
  // 管理全选复选框的状态
  const [isSelectAll, setIsSelectAll] = useState(false);

  // 全选/取消全选的处理函数
  const handleSelectAll = () => {
    const newIsSelectAll = !isSelectAll;
    setIsSelectAll(newIsSelectAll);
    // 根据全选状态更新选中的行ID
    setSelectedRowIds(newIsSelectAll ? tableData.map(item => item.id) : []);
  };

  // 单行选择的处理函数
  const handleSelectRow = (rowId) => {
    setSelectedRowIds(prev => {
      const newSelected = prev.includes(rowId) 
        ? prev.filter(id => id !== rowId) 
        : [...prev, rowId];
      // 更新全选状态：当所有行都被选中时，全选框自动勾选
      setIsSelectAll(newSelected.length === tableData.length);
      return newSelected;
    });
  };

  // 获取选中的行数据并输出
  const handleShowSelected = () => {
    const selectedItems = tableData.filter(item => selectedRowIds.includes(item.id));
    console.log('选中的行数据：', selectedItems);
    // 这里可以根据需求做其他处理，比如提交到后端等
  };

  return (
    <div>
      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>
              <Checkbox checked={isSelectAll} onChange={handleSelectAll} />
            </Table.HeaderCell>
            <Table.HeaderCell>姓名</Table.HeaderCell>
            <Table.HeaderCell>年龄</Table.HeaderCell>
            <Table.HeaderCell>部门</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {tableData.map(item => (
            <Table.Row key={item.id}>
              <Table.Cell>
                <Checkbox 
                  checked={selectedRowIds.includes(item.id)} 
                  onChange={() => handleSelectRow(item.id)} 
                />
              </Table.Cell>
              <Table.Cell>{item.name}</Table.Cell>
              <Table.Cell>{item.age}</Table.Cell>
              <Table.Cell>{item.department}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>

      <Button primary onClick={handleShowSelected} style={{ marginTop: '1rem' }}>
        查看选中项
      </Button>
    </div>
  );
};

export default SelectableTable;

关键逻辑说明 #

• 状态管理：用selectedRowIds存储所有选中行的ID，isSelectAll控制表头全选框的状态
• 全选逻辑：点击表头复选框时，直接将所有行ID加入/清空选中数组，并同步更新全选状态
• 单行选择：点击行内复选框时，切换该行ID在选中数组中的存在状态；同时判断选中数组长度是否等于总行数，自动同步全选框的状态
• 获取选中值：通过filter方法从原始数据中筛选出ID在selectedRowIds中的项，即可得到完整的选中行数据

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