react 的单选table 怎么回显

在React中创建带单选功能的表格（Table）并实现数据回显，通常需要以下几个步骤：

1. **组件设计**：
- 创建一个`TableRow`组件，它应该包含一个复选框(`<input type="checkbox" />`)、一个描述字段和其他内容。
- 定义一个状态变量（如`selectedItems`）来存储当前被勾选的行。

2. **表格数据绑定**：
- 将表格的数据源作为一个prop传递给表格组件，并在每个`TableRow`组件中展示对应的数据项。
- 为每一行添加一个事件处理器，当单选框被点击时更新`selectedItems`。

3. **表头和筛选**：
- 可能还需要一个表头，用于显示是否启用选择，以及一个筛选或搜索功能来过滤显示的行。

4. **回显已选值**：
- 当组件初始化时，如果从服务器或上一次保存的状态获取到已有选择的数据，将对应的行的索引添加到`selectedItems`数组。

5. **状态管理**：
- 使用React的状态管理工具（如Redux、Context API或useState）来处理`selectedItems`的变化，并保持全局可见。

import React, { useState } from 'react';

// 假设你有一个表格数据数组items
const DataTable = ({ items }) => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleCheckboxChange = (index) => {
    if (!selectedItems.includes(index)) {
      setSelectedItems([...selectedItems, index]);
    } else {
      setSelectedItems(selectedItems.filter((i) => i !== index));
    }
  };

  return (
    <table>
      {/* 表格头部 */}
      <thead>
        <tr>
          <th>
            <input type="checkbox" onChange={() => setSelectedItems([...selectedItems, ...items.map((_, idx) => idx)])} />
          </th>
          {/* 其他列标题... */}
        </tr>
      </thead>

      {/* 表格主体 */}
      <tbody>
        {items.map((item, index) => (
          <TableRow key={index} item={item} isSelected={selectedItems.includes(index)} onCheckboxChange={() => handleCheckboxChange(index)} />
        ))}
      </tbody>
    </table>
  );
};

const TableRow = ({ item, isSelected, onCheckboxChange }) => {
  // 根据isSelected渲染相应的复选框样式...
  <td>
    <input type="checkbox" checked={isSelected} onChange={(e) => onCheckboxChange()} />
  </td>
  {/* 描述或其他数据展示... */}
};

export default DataTable;