当前位置：首页 > React

react 全选框实现

2026-01-26 18:46:31React

实现全选框的基本逻辑

在React中实现全选框功能需要维护两个状态：单个复选框的选中状态和全选框的选中状态。通过比较两者之间的关系，可以动态更新全选框的状态。

定义必要状态

使用useState钩子来管理复选框的状态。通常需要一个数组来存储每个选项的选中状态，以及一个布尔值表示全选状态。

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 handleCheckboxChange = (id) => {
  const updatedItems = items.map(item =>
    item.id === id ? { ...item, checked: !item.checked } : item
  );
  setItems(updatedItems);
  setSelectAll(updatedItems.every(item => item.checked));
};

处理全选框变化

当用户点击全选框时，更新所有单个复选框的选中状态。

const handleSelectAllChange = () => {
  const newSelectAll = !selectAll;
  setSelectAll(newSelectAll);
  setItems(items.map(item => ({ ...item, checked: newSelectAll })));
};

渲染复选框列表

在组件中渲染全选框和单个复选框列表。

return (
  <div>
    <label>
      <input
        type="checkbox"
        checked={selectAll}
        onChange={handleSelectAllChange}
      />
      Select All
    </label>
    {items.map(item => (
      <div key={item.id}>
        <label>
          <input
            type="checkbox"
            checked={item.checked}
            onChange={() => handleCheckboxChange(item.id)}
          />
          {item.name}
        </label>
      </div>
    ))}
  </div>
);

完整组件示例

将上述代码整合成一个完整的React组件。

import React, { useState } from 'react';

function SelectAllCheckbox() {
  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 handleCheckboxChange = (id) => {
    const updatedItems = items.map(item =>
      item.id === id ? { ...item, checked: !item.checked } : item
    );
    setItems(updatedItems);
    setSelectAll(updatedItems.every(item => item.checked));
  };

  const handleSelectAllChange = () => {
    const newSelectAll = !selectAll;
    setSelectAll(newSelectAll);
    setItems(items.map(item => ({ ...item, checked: newSelectAll })));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={selectAll}
          onChange={handleSelectAllChange}
        />
        Select All
      </label>
      {items.map(item => (
        <div key={item.id}>
          <label>
            <input
              type="checkbox"
              checked={item.checked}
              onChange={() => handleCheckboxChange(item.id)}
            />
            {item.name}
          </label>
        </div>
      ))}
    </div>
  );
}

export default SelectAllCheckbox;