react 多选实现
实现 React 多选功能的方法
使用状态管理存储选中项
在 React 中实现多选功能需要维护一个状态来存储用户选择的项目。可以使用 useState 钩子来管理选中项列表。
const [selectedItems, setSelectedItems] = useState([]);处理选择/取消选择逻辑
当用户点击项目时，需要判断该项目是否已被选中，并相应地从列表中添加或移除。
const handleSelect = (item) => {
setSelectedItems(prev =>
prev.includes(item)
? prev.filter(i => i !== item)
: [...prev, item]
);
};渲染可选择的项目列表
在渲染项目列表时，根据选中状态应用不同的样式或标记。
{items.map(item => (
<div
key={item.id}
onClick={() => handleSelect(item)}
style={{
backgroundColor: selectedItems.includes(item) ? 'lightblue' : 'white'
}}
>
{item.name}
</div>
))}添加全选/取消全选功能
如果需要全选功能，可以添加一个处理全选的函数。
const handleSelectAll = () => {
setSelectedItems(selectedItems.length === items.length ? [] : [...items]);
};使用复选框实现多选
更常见的做法是使用复选框来实现多选功能。
{items.map(item => (
<div key={item.id}>
<input
type="checkbox"
checked={selectedItems.includes(item)}
onChange={() => handleSelect(item)}
/>
<label>{item.name}</label>
</div>
))}性能优化
对于大型列表，考虑使用 useMemo 或 React.memo 来优化性能。
const memoizedItems = useMemo(() =>
items.map(item => ({
...item,
isSelected: selectedItems.includes(item)
})),
[items, selectedItems]);使用第三方库
对于更复杂的需求，可以考虑使用专门的 UI 库如 react-select 或 material-ui 的多选组件。
import Select from 'react-select';
<Select
isMulti
options={options}
onChange={setSelectedItems}
/>注意事项
- 确保为每个可选项设置唯一的
key属性 - 考虑添加键盘导航支持以提升可访问性
- 对于大量数据，实现虚拟滚动以提高性能
