如何在ReactJS中用useRef实现点击显示/外部点击隐藏菜单的切换功能？

下面是完整的实现方案，核心是通过useRef标记菜单和按钮的DOM节点，结合全局点击事件判断点击区域来控制菜单显示：

步骤说明 #

• 用useState维护菜单的显示状态
• 用useRef获取按钮和菜单的DOM元素，用于后续判断点击范围
• 通过useEffect添加全局点击监听，组件卸载时移除监听，避免内存泄漏
• 按钮点击时切换菜单状态，同时阻止事件冒泡（防止全局监听立刻触发关闭）
• 全局点击事件中，判断点击目标是否在按钮或菜单内部，不在则关闭菜单

完整代码示例 #

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

function DropdownMenu() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const buttonRef = useRef(null);
  const menuRef = useRef(null);

  // 全局点击监听：判断是否点击了菜单外部
  useEffect(() => {
    const handleClickOutside = (event) => {
      // 如果按钮和菜单都存在，且点击目标不在两者范围内
      if (buttonRef.current && menuRef.current) {
        const isClickOnButton = buttonRef.current.contains(event.target);
        const isClickOnMenu = menuRef.current.contains(event.target);
        if (!isClickOnButton && !isClickOnMenu) {
          setIsMenuOpen(false);
        }
      }
    };

    // 添加全局监听
    document.addEventListener('click', handleClickOutside);
    // 组件卸载时移除监听
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  // 按钮点击事件：切换菜单显示状态
  const handleButtonClick = (event) => {
    // 阻止事件冒泡，避免触发全局点击监听
    event.stopPropagation();
    setIsMenuOpen(prev => !prev);
  };

  return (
    <div className="dropdown-container">
      <button ref={buttonRef} onClick={handleButtonClick}>
        {isMenuOpen ? '关闭菜单' : '打开菜单'}
      </button>
      
      {isMenuOpen && (
        <div ref={menuRef} className="menu">
          <p>菜单选项1</p>
          <p>菜单选项2</p>
          <p>菜单选项3</p>
        </div>
      )}
    </div>
  );
}

export default DropdownMenu;

关键细节解释 #

1. ref的作用：buttonRef和menuRef分别绑定到按钮和菜单元素，通过current属性获取真实DOM节点，用contains()方法判断点击目标是否在元素内部。
2. 全局监听的清理：useEffect的返回函数会在组件卸载时执行，移除全局点击事件，防止内存泄漏。
3. 阻止事件冒泡：按钮点击时调用event.stopPropagation()，避免事件冒泡到document后触发全局监听，导致刚打开的菜单立刻关闭。
4. 状态切换逻辑：按钮点击时切换isMenuOpen的状态，全局点击时只有点击外部才关闭菜单，点击按钮或菜单内部不会触发关闭。

这样就能实现你要的功能：点击按钮切换菜单显示，点击菜单外部或再次点击按钮都能关闭菜单。

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