react如何批量选中

批量选中功能的实现方法

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

方案一：复选框批量选择

import { useState } from 'react';

function BatchSelect() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', selected: false },
    { id: 2, name: 'Item 2', selected: false },
    // 更多项目...
  ]);

  const [selectAll, setSelectAll] = useState(false);

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

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

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

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

方案二：表格行批量选择

对于表格数据的批量选择，可以结合表头和行选择器：

function TableSelection() {
  const [rows, setRows] = useState([
    { id: 1, name: 'Product A', price: 10, selected: false },
    { id: 2, name: 'Product B', price: 20, selected: false },
    // 更多行数据...
  ]);

  const handleRowSelect = (id) => {
    setRows(rows.map(row => 
      row.id === id ? { ...row, selected: !row.selected } : row
    ));
  };

  const handleSelectAll = (e) => {
    const isChecked = e.target.checked;
    setRows(rows.map(row => ({ ...row, selected: isChecked })));
  };

  return (
    <table>
      <thead>
        <tr>
          <th>
            <input 
              type="checkbox" 
              onChange={handleSelectAll}
              checked={rows.every(row => row.selected)}
            />
          </th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {rows.map(row => (
          <tr key={row.id}>
            <td>
              <input
                type="checkbox"
                checked={row.selected}
                onChange={() => handleRowSelect(row.id)}
              />
            </td>
            <td>{row.name}</td>
            <td>{row.price}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

方案三：使用自定义Hook封装逻辑

对于复杂场景，可以创建自定义Hook复用选择逻辑：

function useSelection(items) {
  const [selected, setSelected] = useState(new Set());

  const toggleSelection = (id) => {
    const newSelected = new Set(selected);
    if (newSelected.has(id)) {
      newSelected.delete(id);
    } else {
      newSelected.add(id);
    }
    setSelected(newSelected);
  };

  const toggleSelectAll = () => {
    if (selected.size === items.length) {
      setSelected(new Set());
    } else {
      setSelected(new Set(items.map(item => item.id)));
    }
  };

  return {
    selected,
    isSelected: (id) => selected.has(id),
    toggleSelection,
    toggleSelectAll,
    allSelected: selected.size === items.length && items.length > 0,
  };
}

性能优化建议

对于大型列表，考虑以下优化措施：

• 使用虚拟滚动技术处理大量数据
• 对选择状态使用不可变数据更新
• 对频繁更新的组件使用React.memo
• 考虑使用状态管理库如Redux或Context API管理全局选择状态

实际应用示例

结合搜索和分页的批量选择：

function AdvancedSelection() {
  const [data, setData] = useState(/* 从API获取的数据 */);
  const [currentPage, setCurrentPage] = useState(1);
  const [searchTerm, setSearchTerm] = useState('');

  // 过滤和分页逻辑
  const filteredData = data.filter(item => 
    item.name.includes(searchTerm)
  );
  const pageSize = 10;
  const paginatedData = filteredData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  // 选择逻辑
  const { selected, toggleSelection, toggleSelectAll } = useSelection(paginatedData);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索..."
      />

      <button onClick={toggleSelectAll}>
        {selected.size === paginatedData.length ? '取消全选' : '全选当前页'}
      </button>

      <ul>
        {paginatedData.map(item => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={selected.has(item.id)}
              onChange={() => toggleSelection(item.id)}
            />
            {item.name}
          </li>
        ))}
      </ul>

      {/* 分页控件 */}
    </div>
  );
}

以上方案可根据具体需求进行调整和组合，核心思想是通过React的状态管理来控制选中状态，并通过事件处理函数更新状态。