当前位置：首页 > React

react原生实现多选全选

2026-01-27 20:05:36React

React 实现多选和全选功能

在 React 中实现多选和全选功能可以通过状态管理来控制选中项的状态。以下是具体的实现方法：

定义状态和初始化数据

使用 useState 钩子来管理选中状态和数据列表。假设有一个列表 items，每个项有一个唯一标识 id 和一个 checked 属性表示是否选中。

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

实现单个项的选择

为每个列表项添加一个复选框，并通过 onChange 事件更新选中状态。

react原生实现多选全选

const handleItemCheck = (id) => {
  setItems(items.map(item => 
    item.id === id ? { ...item, checked: !item.checked } : item
  ));
};

实现全选功能

全选按钮的 onChange 事件会切换所有项的选中状态。

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

渲染列表和全选按钮

在组件中渲染列表项和全选按钮，绑定对应的事件处理函数。

react原生实现多选全选

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

动态更新全选状态

当用户手动选择所有项时，全选按钮应自动勾选。可以在 useEffect 中监听 items 的变化。

useEffect(() => {
  const allChecked = items.every(item => item.checked);
  setSelectAll(allChecked);
}, [items]);

完整代码示例

以下是一个完整的 React 组件示例，实现了多选和全选功能：

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

function MultiSelect() {
  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 handleItemCheck = (id) => {
    setItems(items.map(item => 
      item.id === id ? { ...item, checked: !item.checked } : item
    ));
  };

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

  useEffect(() => {
    const allChecked = items.every(item => item.checked);
    setSelectAll(allChecked);
  }, [items]);

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

export default MultiSelect;