react 实现全选

实现全选功能的基本思路

在React中实现全选功能通常涉及以下关键点：维护一个状态数组记录选中项，通过复选框的checked属性绑定状态，全选按钮控制所有子选项的选中状态。

定义组件状态

使用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([]);

全选复选框逻辑

全选复选框的onChange事件需要处理两种场景：全选时将所有项ID加入数组，取消全选时清空数组。

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

单个选项复选框逻辑

单个选项的选中状态通过检查其ID是否存在于selectedItems数组中确定，切换选中状态时更新数组。

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

渲染复选框列表

全选复选框的checked状态通过比较选中数组长度与总项数确定，每个子选项绑定对应的处理函数。

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

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

性能优化建议

对于大型列表，考虑使用useMemo优化渲染，或改用不可变数据库如Immer。若需要持久化选中状态，可将数据保存在上下文或状态管理工具中。

完整组件示例

import React, { useState } from 'react';

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

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

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

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={selectedItems.length === items.length}
          onChange={handleSelectAll}
        />
        全选
      </label>

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