React 表格数据删除：高效使用多选框和 Filter 方法

首先，需要考虑表格数据的存储方式，最好是使用 state 来存储表格数据。然后，在表格中添加一个多选框列，用于选择要删除的数据。最后，在删除按钮的点击事件中，获取选中的数据，使用 filter 方法过滤掉选中的数据，然后更新 state 中的表格数据即可。

以下是一个示例代码：

import React, { useState } from 'react';

const Table = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', age: 28 },
    { id: 2, name: 'Jane', age: 24 },
    { id: 3, name: 'Bob', age: 32 }
  ]);
  const [selectedRows, setSelectedRows] = useState([]);

  const handleSelectRow = (id) => {
    if (selectedRows.includes(id)) {
      setSelectedRows(selectedRows.filter((rowId) => rowId !== id));
    } else {
      setSelectedRows([...selectedRows, id]);
    }
  };

  const handleDeleteRows = () => {
    const newData = data.filter((row) => !selectedRows.includes(row.id));
    setData(newData);
    setSelectedRows([]);
  };

  return (
    <div>
      <button onClick={handleDeleteRows}>Delete</button>
      <table>
        <thead>
          <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr key={row.id}>
              <td>
                <input
                  type="checkbox"
                  checked={selectedRows.includes(row.id)}
                  onChange={() => handleSelectRow(row.id)}
                />
              </td>
              <td>{row.name}</td>
              <td>{row.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

在上面的代码中，我们首先定义了一个 state 变量 data 来存储表格数据。然后，我们定义了一个新的 state 变量 selectedRows 来存储选中的行。在表格中添加了一个多选框列，用于选择要删除的行。在 handleSelectRow 函数中，我们在选中/取消选中行时更新 selectedRows 数组。在 handleDeleteRows 函数中，我们使用 filter 方法过滤掉选中的行，然后使用 setData 更新表格数据。最后，我们在渲染表格时使用 selectedRows.includes(row.id) 来确定是否勾选了当前行。