react实现全选功能

实现全选功能的基本思路

在React中实现全选功能通常涉及以下关键点：维护一个状态数组存储选中项，通过全选复选框控制所有子项的选中状态，并处理子项变化时同步更新全选状态。

使用useState管理状态

定义两个状态：items存储数据列表，selectedItems存储被选中的ID数组。全选复选框的状态通过比较两者长度确定。

const [items, setItems] = useState([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);
const [selectedItems, setSelectedItems] = useState([]);

全选复选框逻辑

全选复选框的checked属性通过比较选中项长度与总项数确定，onChange事件切换全选/取消全选。

const handleSelectAll = (e) => {
  if (e.target.checked) {
    setSelectedItems(items.map(item => item.id));
  } else {
    setSelectedItems([]);
  }
};

<input
  type="checkbox"
  checked={selectedItems.length === items.length}
  onChange={handleSelectAll}
/>

单个复选框逻辑

单个复选框的checked属性检查当前ID是否在选中数组中，onChange事件更新选中状态数组。

const handleItemSelect = (id) => (e) => {
  if (e.target.checked) {
    setSelectedItems([...selectedItems, id]);
  } else {
    setSelectedItems(selectedItems.filter(itemId => itemId !== id));
  }
};

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

优化性能（可选）

对于大型列表，可使用useMemo记忆计算结果，或考虑使用不可变数据库如Immer简化状态更新逻辑。

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

完整组件示例

import React, { useState, useMemo } from 'react';

function SelectAllDemo() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);
  const [selectedItems, setSelectedItems] = useState([]);

  const handleSelectAll = (e) => {
    if (e.target.checked) {
      setSelectedItems(items.map(item => item.id));
    } else {
      setSelectedItems([]);
    }
  };

  const handleItemSelect = (id) => (e) => {
    if (e.target.checked) {
      setSelectedItems([...selectedItems, id]);
    } else {
      setSelectedItems(selectedItems.filter(itemId => itemId !== id));
    }
  };

  const isAllSelected = useMemo(
    () => selectedItems.length === items.length && items.length > 0,
    [selectedItems, items]
  );

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isAllSelected}
          onChange={handleSelectAll}
        />
        Select All
      </label>

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