ReactJS中点击外部如何关闭多个自定义下拉菜单？

问题根源 #

第一个菜单无法修改值的核心原因是状态管理冲突：单个下拉菜单用单一isOpen状态没问题，但多个菜单共用同一个状态时，操作第二个菜单会覆盖状态，导致第一个菜单的展开/选中逻辑失效。

解决方案 #

给每个下拉菜单分配独立状态，同时统一处理“点击外部关闭所有菜单”的逻辑，具体实现如下：

1. 用对象管理多菜单状态

放弃单一isOpen布尔值，改用对象存储每个菜单的展开状态，再用另一个对象存储选中值：

const [dropdownStates, setDropdownStates] = useState({
  menu1: false,
  menu2: false
});
const [selectedValues, setSelectedValues] = useState({
  menu1: '',
  menu2: ''
});

2. 存储每个菜单的DOM引用

通过useRef创建对象存储所有下拉菜单的DOM节点，用于判断点击是否在菜单内部：

const dropdownRefs = useRef({
  menu1: null,
  menu2: null
});

3. 实现外部点击关闭逻辑

监听document点击事件，遍历所有菜单引用，判断点击目标是否在任意菜单内部，不在则关闭所有菜单：

useEffect(() => {
  const handleClickOutside = (e) => {
    const isInsideAnyDropdown = Object.values(dropdownRefs.current).some(ref => 
      ref && ref.contains(e.target)
    );
    if (!isInsideAnyDropdown) {
      // 重置所有菜单为关闭状态
      setDropdownStates(prev => Object.keys(prev).reduce((acc, key) => {
        acc[key] = false;
        return acc;
      }, {}));
    }
  };

  document.addEventListener('mousedown', handleClickOutside);
  return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);

4. 封装可复用的下拉组件

把下拉菜单封装成独立组件，通过props传递状态、回调和选项，避免代码冗余：

// CustomDropdown.jsx
import { forwardRef } from 'react';

const CustomDropdown = forwardRef(({ id, isOpen, toggle, selectedValue, options, onSelect }, ref) => {
  return (
    <div ref={ref} style={{ margin: '10px 0', position: 'relative' }}>
      <button 
        onClick={() => toggle(id)}
        style={{ padding: '8px 16px', cursor: 'pointer' }}
      >
        {selectedValue || `选择菜单${id.slice(-1)}选项`}
        <span style={{ marginLeft: '8px' }}>{isOpen ? '▲' : '▼'}</span>
      </button>
      {isOpen && (
        <ul style={{ 
          listStyle: 'none', 
          padding: '0', 
          margin: '8px 0 0 0',
          border: '1px solid #eee',
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          backgroundColor: '#fff',
          zIndex: 100
        }}>
          {options.map((option, index) => (
            <li 
              key={index}
              onClick={() => onSelect(id, option)}
              style={{ 
                padding: '8px 16px', 
                cursor: 'pointer',
                '&:hover': { backgroundColor: '#f5f5f5' }
              }}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
});

export default CustomDropdown;

5. 父组件中使用多菜单

在父组件中引入封装好的组件，传递对应props：

// App.jsx
import { useState, useEffect, useRef } from 'react';
import CustomDropdown from './CustomDropdown';

function App() {
  const [dropdownStates, setDropdownStates] = useState({
    menu1: false,
    menu2: false
  });
  const [selectedValues, setSelectedValues] = useState({
    menu1: '',
    menu2: ''
  });
  const dropdownRefs = useRef({
    menu1: null,
    menu2: null
  });

  useEffect(() => {
    const handleClickOutside = (e) => {
      const isInsideAnyDropdown = Object.values(dropdownRefs.current).some(ref => 
        ref && ref.contains(e.target)
      );
      if (!isInsideAnyDropdown) {
        setDropdownStates(prev => Object.keys(prev).reduce((acc, key) => {
          acc[key] = false;
          return acc;
        }, {}));
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const toggleDropdown = (menuId) => {
    setDropdownStates(prev => ({
      ...prev,
      [menuId]: !prev[menuId]
    }));
  };

  const handleSelect = (menuId, value) => {
    setSelectedValues(prev => ({
      ...prev,
      [menuId]: value
    }));
    toggleDropdown(menuId); // 选中后关闭当前菜单
  };

  const menuOptions = {
    menu1: ['选项1-1', '选项1-2', '选项1-3'],
    menu2: ['选项2-1', '选项2-2', '选项2-3']
  };

  return (
    <div style={{ padding: '20px' }}>
      <CustomDropdown
        id="menu1"
        isOpen={dropdownStates.menu1}
        toggle={toggleDropdown}
        selectedValue={selectedValues.menu1}
        options={menuOptions.menu1}
        onSelect={handleSelect}
        ref={el => dropdownRefs.current.menu1 = el}
      />
      <CustomDropdown
        id="menu2"
        isOpen={dropdownStates.menu2}
        toggle={toggleDropdown}
        selectedValue={selectedValues.menu2}
        options={menuOptions.menu2}
        onSelect={handleSelect}
        ref={el => dropdownRefs.current.menu2 = el}
      />
    </div>
  );
}

export default App;

核心改进点 #

• 每个菜单拥有独立的展开状态和选中值，彻底解决状态冲突问题
• 通过遍历DOM引用实现统一的外部点击关闭逻辑，无需给每个菜单单独绑定事件
• 组件化封装提升代码复用性，新增菜单只需添加对应的状态和props即可

内容的提问来源于stack exchange，提问作者NASIR ALI