本文详解如何在 react 中实现带分组标签（`
原生 HTML <select> 元素不支持在 <optgroup> 内嵌入按钮或任意 HTML 元素，其子节点仅允许 <option> 和 <optgroup>。因此，你尝试在 map 中为每个分组返回 <div><button>...</button></div> 的做法无法生效——这些按钮会被浏览器忽略或导致渲染异常。
要真正实现“分组 + 按钮控制”的交互体验，推荐采用自定义下拉组件（Custom Dropdown），而非依赖原生 <select>。以下是专业、可落地的解决方案：
✅ 正确思路：用 div 模拟下拉，保留语义与交互能力
import React, { useState, useRef, useEffect } from 'react';
const CustomGroupedDropdown = () => {
const [isOpen, setIsOpen] = useState(false);
const [selectedValues, setSelectedValues] = useState<string[]>([]);
const dropdownRef = useRef<HTMLDivElement>(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 (
<div className="custom-dropdown" ref={dropdownRef}>
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="dropdown-trigger"
>
{selectedValues.length > 0
? `${selectedValues.length} selected`
: 'Select options...'}
</button>
{isOpen && (
<div className="dropdown-menu">
{options.map((group) => (
<div key={group.name} className="dropdown-group">
<div className="group-header">
<span className="group-name">{group.name}</span>
<div className="group-actions">
<button
type="button"
onClick={() => handleSelectAll(group.name)}
className="btn btn-sm"
>
SELECT All
</button>
<button
type="button"
onClick={() => handleClearGroup(group.name)}
className="btn btn-sm btn-clear"
>
Clear
</button>
</div>
</div>
<div className="group-options">
{group.options.map((option) => (
<label key={option.value} className="option-item">
<input
type="checkbox"
checked={selectedValues.includes(option.value)}
onChange={() => toggleOption(option.value)}
/>
<span>{option.label}</span>
</label>
))}
</div>
</div>
))}
</div>
)}
</div>
);
};
export default CustomGroupedDropdown;⚠️ 注意事项
- 不要强行向 <select> 注入按钮：违反 HTML 规范，不可靠且无法通过无障碍检测（a11y）。
- <optgroup> 仅用于语义分组：它提升可访问性（如屏幕阅读器识别），但不能承载交互控件。
- 若必须用原生 <select>：只能放弃按钮，改用 onChange 配合 Ctrl/Cmd + Click 多选，或提供独立的“全选”按钮置于下拉框外部。
- 样式与可访问性：自定义下拉需手动添加 aria-expanded、role="listbox"、键盘导航（↑↓EnterEsc）等以满足 WCAG 标准。
✅ 总结
真正的用户体验不是“让按钮出现在下拉里”，而是“让用户高效完成分组选择”。使用语义清晰的自定义组件，既规避了原生限制，又为未来扩展（如搜索、虚拟滚动、异步加载）预留空间。按钮属于控制层，选项属于数据层——分而治之，方得始终。
