当前位置：首页 > React

react实现单选全选

2026-01-26 22:04:00React

实现单选与全选功能

在React中实现单选和全选功能通常涉及状态管理和事件处理。以下是一个完整的实现方案：

基础状态设置

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

  // 检查是否所有项都被选中
  const allSelected = items.every(item => item.checked);
  setSelectAll(allSelected);
};

处理全选逻辑

const handleSelectAll = (e) => {
  const isChecked = e.target.checked;
  setSelectAll(isChecked);

  setItems(prevItems => 
    prevItems.map(item => ({ ...item, checked: isChecked }))
  );
};

渲染组件

return (
  <div>
    <label>
      <input 
        type="checkbox" 
        checked={selectAll} 
        onChange={handleSelectAll} 
      />
      全选
    </label>

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

优化与注意事项

派生状态：selectAll状态可以从items派生，避免状态不一致

const selectAll = items.length > 0 && items.every(item => item.checked);

性能优化：对于大型列表，使用React.memo优化子组件

const Item = React.memo(({ item, onSelect }) => (
  <div>
    <label>
      <input 
        type="checkbox" 
        checked={item.checked} 
        onChange={() => onSelect(item.id)} 
      />
      {item.name}
    </label>
  </div>
));

不可变更新：确保状态更新时创建新对象/数组，而非直接修改原状态

完整组件示例

import React, { useState } from 'react';

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

  const selectAll = items.length > 0 && items.every(item => item.checked);

  const handleSelectAll = (e) => {
    const isChecked = e.target.checked;
    setItems(prevItems => 
      prevItems.map(item => ({ ...item, checked: isChecked }))
    );
  };

  return (
    <div>
      <label>
        <input 
          type="checkbox" 
          checked={selectAll} 
          onChange={handleSelectAll} 
        />
        全选
      </label>

      {items.map(item => (
        <Item 
          key={item.id} 
          item={item} 
          onSelect={handleSingleSelect} 
        />
      ))}
    </div>
  );
}

const Item = React.memo(({ item, onSelect }) => (
  <div>
    <label>
      <input 
        type="checkbox" 
        checked={item.checked} 
        onChange={() => onSelect(item.id)} 
      />
      {item.name}
    </label>
  </div>
));

export default SelectDemo;

这种方法提供了清晰的单选和全选功能实现，同时考虑了性能优化和状态一致性。

react实现单选全选