如何使用React useRef Hook实现点击外部关闭自定义Select组件菜单

实现思路 #

核心是通过useRef绑定Select组件的完整容器DOM节点，全局监听点击事件，判断点击目标是否属于容器内部，不属于则触发菜单关闭逻辑。

具体实现步骤 #

• 首先声明容器ref和菜单显隐状态，在 useEffect 中绑定全局事件监听

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

const CustomSelect = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  // 绑定包含触发按钮+下拉菜单的完整Select外层容器
  const selectWrapperRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      // 点击目标不在Select容器内时关闭菜单
      if (selectWrapperRef.current && !selectWrapperRef.current.contains(event.target)) {
        setIsMenuOpen(false);
      }
    };
    // 监听mousedown优先级高于click，避免和其他点击事件时序冲突
    document.addEventListener('mousedown', handleClickOutside);
    // 组件卸载时移除监听避免内存泄漏
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const toggleMenu = () => setIsMenuOpen(prev => !prev);

  return (
    <div ref={selectWrapperRef} className="select-wrapper">
      <button onClick={toggleMenu} className="select-trigger">
        请选择选项
      </button>
      {isMenuOpen && (
        <div className="select-dropdown">
          <button>选项1</button>
          <button>选项2</button>
          <button>选项3</button>
        </div>
      )}
    </div>
  );
};

• 关键注意点：
  • 不要单独给下拉菜单绑定ref，必须把触发按钮和下拉菜单都放在同一个ref绑定的容器内，否则点击触发按钮时会被判定为「点击外部」，导致菜单刚打开就被关闭
  • 如果需要兼容ESC键关闭菜单，可以在同一个useEffect中追加键盘事件监听：

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (selectWrapperRef.current && !selectWrapperRef.current.contains(event.target)) {
        setIsMenuOpen(false);
      }
    };
    const handleEscClose = (event) => {
      if (event.key === 'Escape') setIsMenuOpen(false);
    };
  
    document.addEventListener('mousedown', handleClickOutside);
    document.addEventListener('keydown', handleEscClose);
    
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('keydown', handleEscClose);
    };
  }, []);
  

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