react在table实现全选

实现全选功能的基本思路

在React中实现表格全选功能，通常需要结合状态管理（如useState）和事件处理。全选逻辑的核心是维护一个选中状态的数组或对象，通过复选框的联动控制实现批量操作。

定义表格数据与选中状态

使用useState分别存储表格数据和选中状态。选中状态可以是数组（记录行索引）或对象（以ID为键的键值对），根据实际需求选择。

const [data, setData] = useState([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);
const [selectedRows, setSelectedRows] = useState([]);

全选复选框的事件处理

全选复选框需要处理两个逻辑：点击时选中/取消所有行；根据当前行选中状态自动更新全选复选框的indeterminate状态。

const handleSelectAll = (e) => {
  if (e.target.checked) {
    setSelectedRows(data.map(item => item.id));
  } else {
    setSelectedRows([]);
  }
};

const isAllSelected = selectedRows.length === data.length;
const isIndeterminate = selectedRows.length > 0 && selectedRows.length < data.length;

单行复选框的事件处理

单个行复选框需要处理选中/取消逻辑，并同步更新全选状态。

const handleRowSelect = (id, e) => {
  if (e.target.checked) {
    setSelectedRows([...selectedRows, id]);
  } else {
    setSelectedRows(selectedRows.filter(rowId => rowId !== id));
  }
};

渲染表格与复选框

在表格结构中实现全选复选框与行复选框的联动。全选复选框的状态由isAllSelected和isIndeterminate控制。

<table>
  <thead>
    <tr>
      <th>
        <input
          type="checkbox"
          checked={isAllSelected}
          onChange={handleSelectAll}
          ref={el => el && (el.indeterminate = isIndeterminate)}
        />
      </th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    {data.map(item => (
      <tr key={item.id}>
        <td>
          <input
            type="checkbox"
            checked={selectedRows.includes(item.id)}
            onChange={(e) => handleRowSelect(item.id, e)}
          />
        </td>
        <td>{item.name}</td>
      </tr>
    ))}
  </tbody>
</table>

性能优化建议

对于大数据量表格，避免直接使用数组.includes()方法判断选中状态，改用Set或对象存储选中状态以提高性能。

const [selectedRows, setSelectedRows] = useState(new Set());

const handleSelectAll = (e) => {
  const newSelected = e.target.checked 
    ? new Set(data.map(item => item.id)) 
    : new Set();
  setSelectedRows(newSelected);
};

const handleRowSelect = (id, e) => {
  const newSelected = new Set(selectedRows);
  e.target.checked ? newSelected.add(id) : newSelected.delete(id);
  setSelectedRows(newSelected);
};

完整代码示例

import React, { useState } from 'react';

function SelectableTable() {
  const [data, setData] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);
  const [selectedRows, setSelectedRows] = useState(new Set());

  const handleSelectAll = (e) => {
    const newSelected = e.target.checked 
      ? new Set(data.map(item => item.id)) 
      : new Set();
    setSelectedRows(newSelected);
  };

  const handleRowSelect = (id, e) => {
    const newSelected = new Set(selectedRows);
    e.target.checked ? newSelected.add(id) : newSelected.delete(id);
    setSelectedRows(newSelected);
  };

  const isAllSelected = selectedRows.size === data.length;
  const isIndeterminate = selectedRows.size > 0 && selectedRows.size < data.length;

  return (
    <table>
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              checked={isAllSelected}
              onChange={handleSelectAll}
              ref={el => el && (el.indeterminate = isIndeterminate)}
            />
          </th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>
              <input
                type="checkbox"
                checked={selectedRows.has(item.id)}
                onChange={(e) => handleRowSelect(item.id, e)}
              />
            </td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default SelectableTable;