React实现全选按钮
实现全选按钮的基本思路
在React中实现全选按钮需要管理选中状态，通常结合复选框（<input type="checkbox">）和状态钩子（如useState）。核心逻辑包括：
- 维护一个数组或对象记录所有子项的选中状态。
- 全选按钮的状态由所有子项是否全部选中决定。
- 点击全选按钮时切换所有子项的选中状态。
示例代码实现
定义状态和列表数据
import React, { useState } from 'react';
const SelectAllExample = () => {
const [items, setItems] = useState([
{ id: 1, name: 'Item 1', checked: false },
{ id: 2, name: 'Item 2', checked: false },
{ id: 3, name: 'Item 3', checked: false },
]);
const [selectAll, setSelectAll] = useState(false);
}处理全选逻辑
const handleSelectAll = (e) => {
const isChecked = e.target.checked;
setSelectAll(isChecked);
setItems(items.map(item => ({ ...item, checked: isChecked })));
};
const handleItemCheck = (id) => {
const updatedItems = items.map(item =>
item.id === id ? { ...item, checked: !item.checked } : item
);
setItems(updatedItems);
setSelectAll(updatedItems.every(item => item.checked));
};渲染组件
return (
<div>
<label>
<input
type="checkbox"
checked={selectAll}
onChange={handleSelectAll}
/>
Select All
</label>
<ul>
{items.map(item => (
<li key={item.id}>
<label>
<input
type="checkbox"
checked={item.checked}
onChange={() => handleItemCheck(item.id)}
/>
{item.name}
</label>
</li>
))}
</ul>
</div>
);关键点说明
-
状态同步
selectAll状态由items.every(item => item.checked)动态计算，确保全选按钮与子项状态一致。- 子项状态变化时需检查是否所有项已选中，以更新全选按钮。
-
性能优化
对于大量数据，建议使用useMemo或React.memo避免不必要的渲染。 -
不可变更新
修改状态时始终创建新对象（如map生成新数组），遵循React的不可变原则。
扩展功能
-
部分选中状态
若部分子项选中，全选按钮可显示为不确定状态（indeterminate属性）：<input type="checkbox" checked={selectAll} indeterminate={!selectAll && items.some(item => item.checked)} onChange={handleSelectAll} /> -
数据持久化
结合useEffect将选中状态保存到本地存储或后端API。
