当前位置：首页 > React

react如何批量选中

2026-02-26 10:01:18React

批量选中实现方法

在React中实现批量选中功能通常涉及状态管理、事件处理和列表渲染。以下是几种常见方法：

react如何批量选中

使用状态管理选中项

创建一个状态来存储选中项的ID或索引。通过复选框的onChange事件更新这个状态。

react如何批量选中

import { useState } from 'react';

function BatchSelect() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);
  const [selectedIds, setSelectedIds] = useState([]);

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

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

  return (
    <div>
      <label>
        <input 
          type="checkbox" 
          checked={selectedIds.length === items.length}
          onChange={handleSelectAll}
        />
        Select All
      </label>

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

使用数据属性存储选中状态

另一种方法是将选中状态直接存储在数据对象中，适用于需要持久化选中状态的场景。

function BatchSelectWithData() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', selected: false },
    { id: 2, name: 'Item 2', selected: false },
    { id: 3, name: 'Item 3', selected: false }
  ]);

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

  const toggleSelectAll = (checked) => {
    setItems(items.map(item => ({ ...item, selected: checked })));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={items.every(item => item.selected)}
          onChange={(e) => toggleSelectAll(e.target.checked)}
        />
        Select All
      </label>

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

性能优化方案

对于大型列表，使用索引而不是ID可能更高效，同时考虑使用useMemo和React.memo优化渲染性能。

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

const MemoizedItem = memo(function Item({ item, onToggle }) {
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={item.selected}
          onChange={() => onToggle(item.id)}
        />
        {item.name}
      </label>
    </div>
  );
});

function OptimizedBatchSelect() {
  const [items, setItems] = useState(
    Array.from({ length: 1000 }, (_, i) => ({
      id: i,
      name: `Item ${i + 1}`,
      selected: false
    }))
  );

  const allSelected = useMemo(
    () => items.every(item => item.selected),
    [items]
  );

  const toggleSelect = (id) => {
    setItems(prev => 
      prev.map(item => 
        item.id === id ? { ...item, selected: !item.selected } : item
      )
    );
  };

  const toggleSelectAll = (checked) => {
    setItems(prev => prev.map(item => ({ ...item, selected: checked })));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={allSelected}
          onChange={(e) => toggleSelectAll(e.target.checked)}
        />
        Select All
      </label>

      <div style={{ height: '400px', overflow: 'auto' }}>
        {items.map(item => (
          <MemoizedItem
            key={item.id}
            item={item}
            onToggle={toggleSelect}
          />
        ))}
      </div>
    </div>
  );
}