本文详解如何在 react 中实现带分组标签（`
原生 HTML
要真正实现“分组 + 按钮控制”的交互体验，推荐采用自定义下拉组件（Custom Dropdown），而非依赖原生
✅ 正确思路：用 div 模拟下拉，保留语义与交互能力
import React, { useState, useRef, useEffect } from 'react';
const CustomGroupedDropdown = () => {
const [isOpen, setIsOpen] = useState(false);
const [selectedValues, setSelectedValues] = useState([]);
const dropdownRef = useRef(null);
const options = [
{
name: "Group 1",
options: [
{ value: "Option 1", label: "Option 1" },
{ value: "Option 2", label: "Option 2" },
{ value: "Option 3", label: "Option 3" },
],
},
{
name: "Group 2",
options: [
{ value: "Option 4", label: "Option 4" },
{ value: "Option 5", label: "Option 5" },
{ value: "Option 6", label: "Option 6" },
],
},
];
// 处理全选（当前组）
const handleSelectAll = (groupName: string) => {
const group = options.find(g => g.name === groupName);
if (!group) return;
const allValues = group.options.map(o => o.value);
setSelectedValues(prev => [...new Set([...prev, ...allValues])]);
};
// 处理清空（当前组）
const handleClearGroup = (groupName: string) => {
const group = options.find(g => g.name === groupName);
if (!group) return;
const groupValues = new Set(group.options.map(o => o.value));
setSelectedValues(prev => prev.filter(v => !groupValues.has(v))));
};
// 切换单个选项
const toggleOption = (value: string) => {
setSelectedValues(prev =>
prev.includes(value)
? prev.filter(v => v !== value)
: [...prev, value]
);
};
// 点击外部关闭下拉
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
return (
{isOpen && (
{options.map((group) => (
{group.name}
{group.options.map((option) => (
))}
))}
)}
);
};
export default CustomGroupedDropdown; ⚠️ 注意事项
- 不要强行向 ：违反 HTML 规范，不可靠且无法通过无障碍检测（a11y）。
- ：它提升可访问性（如屏幕阅读器识别），但不能承载交互控件。
- 若必须用原生 ：只能放弃按钮，改用 onChange 配合 Ctrl/Cmd + Click 多选，或提供独立的“全选”按钮置于下拉框外部。
- 样式与可访问性：自定义下拉需手动添加 aria-expanded、role="listbox"、键盘导航（↑↓EnterEsc）等以满足 WCAG 标准。
✅ 总结
真正的用户体验不是“让按钮出现在下拉里”，而是“让用户高效完成分组选择”。使用语义清晰的自定义组件，既规避了原生限制，又为未来扩展（如搜索、虚拟滚动、异步加载）预留空间。按钮属于控制层，选项属于数据层——分而治之，方得始终。
