react表格选中记录

在React中，实现表格选择功能通常涉及到状态管理和组件交互。一种常见的做法是使用`state`来跟踪当前选中的行或单元格。以下是一个基本步骤：

1. 创建一个`selectedRows`状态数组，初始化为空数组。

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

2. 在表格组件中，为每一行添加一个`onClick`事件处理器，当点击某一行时更新`selectedRows`。

{rows.map((row, index) => (
  <tr key={index} onClick={() => setSelectedRows([...selectedRows, index])}>
    {/* 表格数据 */}
  </tr>
))}

3. 可能需要提供一些视觉反馈，比如高亮选中的行或者给每个单元格添加一个复选框。你可以为复选框添加状态，并绑定到行索引，以便控制选中状态。

<input type="checkbox" checked={selectedRows.includes(index)} onChange={() => setSelectedRows(selectedRows.includes(index) ? selectedRows.filter(_ => _ !== index) : [...selectedRows, index])} />

4. 提供清除选择的功能，例如在右上角添加一个清除按钮，触发时清空所有已选行。

<Button onClick={() => setSelectedRows([])}>清除选择</Button>