当前位置：首页 > React

react实现多选

2026-01-26 13:01:03React

实现多选功能的方法

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

复选框列表多选

通过useState管理选中项数组，结合map渲染复选框列表：

import { useState } from 'react';

function MultiCheckbox() {
  const items = ['Apple', 'Banana', 'Orange'];
  const [selected, setSelected] = useState([]);

  const handleChange = (item) => {
    setSelected(prev => 
      prev.includes(item) 
        ? prev.filter(i => i !== item) 
        : [...prev, item]
    );
  };

  return (
    <div>
      {items.map(item => (
        <label key={item}>
          <input
            type="checkbox"
            checked={selected.includes(item)}
            onChange={() => handleChange(item)}
          />
          {item}
        </label>
      ))}
      <p>Selected: {selected.join(', ')}</p>
    </div>
  );
}

表格行多选

使用对象或Map结构存储选中状态以提高性能：

function SelectableTable({ data }) {
  const [selectedIds, setSelectedIds] = useState(new Set());

  const toggleRow = (id) => {
    const newSelection = new Set(selectedIds);
    newSelection.has(id) ? newSelection.delete(id) : newSelection.add(id);
    setSelectedIds(newSelection);
  };

  return (
    <table>
      {data.map(item => (
        <tr key={item.id} className={selectedIds.has(item.id) ? 'selected' : ''}>
          <td>
            <input
              type="checkbox"
              checked={selectedIds.has(item.id)}
              onChange={() => toggleRow(item.id)}
            />
          </td>
          <td>{item.name}</td>
        </tr>
      ))}
    </table>
  );
}

下拉多选框

结合第三方库如react-select实现更复杂的多选：

import Select from 'react-select';

const options = [
  { value: 'red', label: 'Red' },
  { value: 'green', label: 'Green' },
  { value: 'blue', label: 'Blue' }
];

function MultiSelect() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  return (
    <Select
      isMulti
      options={options}
      value={selectedOptions}
      onChange={setSelectedOptions}
    />
  );
}

性能优化建议

对于大型数据集应避免在每次渲染时重新计算选中状态，可使用useMemo缓存计算结果：

const selectedItems = useMemo(() => 
  items.filter(item => selectedIds.has(item.id)), 
  [items, selectedIds]
);

全选/反选功能

添加控制所有选项的快捷操作：

const handleSelectAll = () => {
  setSelectedIds(prev => 
    prev.size === data.length 
      ? new Set() 
      : new Set(data.map(item => item.id))
  );
};

以上实现方式可根据具体需求组合使用，关键点在于合理设计状态结构并确保渲染性能。对于复杂场景，可考虑使用状态管理库如Redux或Context API来共享多选状态。

react实现多选