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>
);

关键点说明

1. 状态同步

   • selectAll状态由items.every(item => item.checked)动态计算，确保全选按钮与子项状态一致。
   • 子项状态变化时需检查是否所有项已选中，以更新全选按钮。

2. 性能优化
   对于大量数据，建议使用useMemo或React.memo避免不必要的渲染。

3. 不可变更新
   修改状态时始终创建新对象（如map生成新数组），遵循React的不可变原则。

扩展功能

• 部分选中状态
  若部分子项选中，全选按钮可显示为不确定状态（indeterminate属性）：

  <input
    type="checkbox"
    checked={selectAll}
    indeterminate={!selectAll && items.some(item => item.checked)}
    onChange={handleSelectAll}
  />

• 数据持久化
  结合useEffect将选中状态保存到本地存储或后端API。