react实现多选
实现多选功能的方法
在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来共享多选状态。
