当前位置：首页 > 文章列表 > 文章 > 前端 > 下拉菜单分组与全选实现技巧

下拉菜单分组与全选实现技巧

2026-01-04 08:24:41 0浏览收藏

今天golang学习网给大家带来了《下拉菜单分组渲染与全选实现方法》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

如何在下拉菜单中正确渲染分组选项并支持全选/清空操作

本文详解如何在 React 中实现带分组标签（``）的下拉选择框，同时在每组顶部添加“全选”“清空”按钮——关键在于分离 UI 控制逻辑与原生 `

原生 HTML 。以下是专业、可落地的解决方案：

✅ 正确思路：用 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) => (
                  
                     toggleOption(option.value)}
                    />
                    {option.label}
                  
                ))}
              
            
          ))}
        
      )}
    
  );
};

export default CustomGroupedDropdown;

⚠️ 注意事项

不要强行向 ：只能放弃按钮，改用 onChange 配合 Ctrl/Cmd + Click 多选，或提供独立的“全选”按钮置于下拉框外部。
样式与可访问性：自定义下拉需手动添加 aria-expanded、role="listbox"、键盘导航（↑↓EnterEsc）等以满足 WCAG 标准。