react如何批量选中

批量选中实现方法

在React中实现批量选中功能通常涉及状态管理、事件处理和列表渲染。以下是几种常见实现方式：

使用状态管理选中项

创建一个数组状态来存储已选中的项目ID或索引：

const [selectedItems, setSelectedItems] = useState([]);

处理单个项目的选中状态切换：

const toggleItemSelection = (itemId) => {
  setSelectedItems(prev => 
    prev.includes(itemId) 
      ? prev.filter(id => id !== itemId) 
      : [...prev, itemId]
  );
};

全选/全不选功能

添加全选切换逻辑：

const toggleSelectAll = (allItems) => {
  setSelectedItems(prev => 
    prev.length === allItems.length 
      ? [] 
      : allItems.map(item => item.id)
  );
};

渲染带复选框的列表项

在渲染列表时为每个项目添加复选框：

{items.map(item => (
  <div key={item.id}>
    <input 
      type="checkbox"
      checked={selectedItems.includes(item.id)}
      onChange={() => toggleItemSelection(item.id)}
    />
    {item.name}
  </div>
))}

使用表格批量操作

对于表格数据，可以添加表头复选框控制全选：

<table>
  <thead>
    <tr>
      <th>
        <input 
          type="checkbox"
          checked={selectedItems.length === items.length}
          onChange={() => toggleSelectAll(items)}
        />
      </th>
      {/* 其他表头 */}
    </tr>
  </thead>
  <tbody>
    {items.map(item => (
      <tr key={item.id}>
        <td>
          <input
            type="checkbox"
            checked={selectedItems.includes(item.id)}
            onChange={() => toggleItemSelection(item.id)}
          />
        </td>
        {/* 其他单元格 */}
      </tr>
    ))}
  </tbody>
</table>

性能优化建议

对于大型列表，考虑使用虚拟滚动技术（如react-window）避免渲染性能问题。可以使用useMemo优化选中状态的派生计算：

const selectedCount = useMemo(() => selectedItems.length, [selectedItems]);

第三方库方案

如果需要更复杂的功能，可以考虑以下库：

• react-table：提供内置的行选择和批量操作功能
• material-ui：包含带有选择功能的DataGrid组件
• downshift：适用于自定义选择场景