React 表格删除选中数据教程：完整步骤及代码示例

要从 React 的表格中删除选中的数据，需要在以下方面进行操作：

创建一个状态变量，用于存储表格中的数据。
创建一个函数来更新状态变量。该函数应该接受一个参数，该参数是要从表格中删除的数据。
在表格中添加一个列，该列将允许用户选择要删除的行。可以使用复选框或按钮等控件来实现此功能。
当用户选择要删除的行时，将选定的行传递给更新状态变量的函数。
在表格的渲染方法中，使用 map 函数将状态变量的值映射到表格行中。对于每一行，检查它是否已被选择。如果已选择，则不渲染该行。

以下是一个简单的代码示例，展示了如何从 React 表格中删除选定的数据：

import React, { useState } from 'react';

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

  function handleDelete(selectedRows) {
    const newData = data.filter(row => !selectedRows.includes(row.id));
    setData(newData);
  }

  return (
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td><input type='checkbox' /></td>
            <td>{row.name}</td>
            <td>{row.age}</td>
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr>
          <td><button onClick={() => handleDelete([1, 3])}>Delete Selected</button></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tfoot>
    </table>
  );
}

export default Table;

在这个例子中，handleDelete 函数接受一个选定行的 ID 数组，并使用 filter 方法从状态数据中删除它们。然后，setData 将新的数据数组传递给状态变量。tfoot 中的按钮调用 handleDelete 函数，并将要删除的行的 ID 传递给它。在渲染表格时，每一行都有一个复选框，用户可以使用它来选择要删除的行。在 map 函数中，只有在行的 ID 不在选定的行中时才渲染该行。