React 表格删除选中数据：完整指南及代码示例

要从 React 表格中删除选定的数据，您需要执行以下步骤：

首先，您需要创建一个状态变量，用于存储表格中的数据。这个状态变量可以是一个数组，每个数组项都代表一行数据。
在表格中，您需要添加一个复选框，允许用户选择要删除的行。当用户选择一个或多个行时，您需要将这些行的索引存储在另一个状态变量中。
当用户点击'删除'按钮时，您需要从状态变量中删除选定的行。可以使用 Array.filter() 方法来过滤数组，以删除选定的行。
最后，您需要将更新后的数据重新渲染到表格中。

下面是一个示例代码，演示如何从 React 表格中删除选定的行：

import React, { useState } from 'react';

function Table() {
  const [data, setData] = useState([
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Jane', age: 25 },
    { id: 3, name: 'Bob', age: 40 },
  ]);

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

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

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

  return (
    <div>
      <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={event => handleCheckboxChange(event, row.id)}
                />
              </td>
              <td>{row.name}</td>
              <td>{row.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={handleDeleteClick}>Delete</button>
    </div>
  );
}

export default Table;

在上面的代码中，我们使用 useState() 钩子创建了两个状态变量：data 和 selectedRows。data 保存表格中的数据，而 selectedRows 保存选定的行的索引。

在表格中，我们添加了一个复选框列，并在每个复选框上添加了一个 onChange 事件处理程序。当用户选择或取消选择行时，我们将其索引添加或从 selectedRows 中删除。

当用户点击'删除'按钮时，我们使用 Array.filter() 方法过滤出不包含选定行的新数组，并将其设置为新的 data 状态变量。最后，我们清空 selectedRows 状态变量，并将更新后的数据重新渲染到表格中。

这是一个简单的例子，您可以根据您的需求进行修改和扩展。