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：适用于自定义选择场景
