Next.js中点击页面任意位置关闭自定义下拉菜单的实现方法

方案1：使用useRef结合全局点击监听 #

这种方案通过React的useRef获取下拉容器节点，配合useEffect管理全局点击事件，完全避免使用document.querySelector这类DOM查询操作：

import { useState, useRef, useEffect } from 'react';

function CustomDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  // 用useRef绑定下拉容器，替代document.querySelector
  const dropdownContainerRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      // 检查点击目标是否在下拉容器之外
      if (dropdownContainerRef.current && !dropdownContainerRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };

    // 挂载时添加全局点击监听
    document.addEventListener('mousedown', handleClickOutside);
    // 卸载时移除监听，避免内存泄漏
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={dropdownContainerRef} className="custom-dropdown">
      <button onClick={() => setIsOpen(prev => !prev)}>
        选择选项 {isOpen ? '▲' : '▼'}
      </button>
      {isOpen && (
        <div className="dropdown-options">
          <div className="option">选项1</div>
          <div className="option">选项2</div>
          <div className="option">选项3</div>
        </div>
      )}
    </div>
  );
}

原理说明：

• useRef是React官方推荐的获取组件内DOM节点的方式，不属于禁止的原生DOM查询操作
• useEffect在组件挂载时给document添加点击监听，卸载时移除，符合React生命周期规范
• 点击事件触发时，通过contains方法判断点击目标是否在下拉容器内部，不在则关闭菜单

方案2：纯React合成事件实现（无全局DOM监听） #

如果严格禁止直接操作document，可以通过事件冒泡和阻止冒泡的方式实现，完全基于React合成事件：

import { useState, useEffect } from 'react';

// 根组件（比如App）
function App() {
  const [triggerCloseDropdown, setTriggerCloseDropdown] = useState(false);

  return (
    {/* 根容器绑定点击事件，触发关闭信号 */}
    <div onClick={() => setTriggerCloseDropdown(true)} style={{ minHeight: '100vh' }}>
      <CustomDropdown 
        triggerClose={triggerCloseDropdown}
        resetTrigger={() => setTriggerCloseDropdown(false)}
      />
    </div>
  );
}

// 自定义下拉组件
function CustomDropdown({ triggerClose, resetTrigger }) {
  const [isOpen, setIsOpen] = useState(false);

  // 监听关闭信号，触发后关闭菜单并重置信号
  useEffect(() => {
    if (triggerClose) {
      setIsOpen(false);
      resetTrigger();
    }
  }, [triggerClose, resetTrigger]);

  // 阻止下拉内部点击事件冒泡到根容器
  const handleDropdownClick = (e) => {
    e.stopPropagation();
    setIsOpen(prev => !prev);
  };

  const handleOptionClick = (e) => {
    e.stopPropagation();
    // 处理选项选择逻辑
    console.log('选中选项');
  };

  return (
    <div onClick={handleDropdownClick} className="custom-dropdown">
      <button>选择选项 {isOpen ? '▲' : '▼'}</button>
      {isOpen && (
        <div className="dropdown-options">
          <div className="option" onClick={handleOptionClick}>选项1</div>
          <div className="option" onClick={handleOptionClick}>选项2</div>
          <div className="option" onClick={handleOptionClick}>选项3</div>
        </div>
      )}
    </div>
  );
}

原理说明：

• 根容器的点击事件会触发关闭信号，下拉组件监听该信号执行关闭操作
• 下拉组件内部的点击事件调用e.stopPropagation()，阻止事件冒泡到根容器，确保点击下拉内部不会触发关闭
• 点击根容器的其他区域时，关闭信号触发，下拉菜单随之关闭

内容的提问来源于stack exchange，提问作者Ghayas Ud Din