添加useEffect实现外部关闭后，Dropdown按钮无法关闭下拉菜单

问题根源 #

1. 事件冲突：点击按钮时，按钮的onClick先触发切换状态，但事件会冒泡到document，触发你添加的mousedown监听器，直接把状态改回false，导致按钮看起来无法关闭菜单。
2. 未清理事件监听器：你的useEffect没有设置依赖数组，也没有清理逻辑，每次组件渲染都会重复绑定监听器，导致多个监听器叠加，状态更新混乱。
3. 闭包问题：Dropdown函数在组件内部每次渲染都会重新创建，可能导致读取的listopen不是最新状态。

解决方案 #

关键改动点

• 用useRef标记下拉菜单容器，判断点击目标是否在菜单内部，避免误关闭。
• 给useEffect添加清理函数，移除事件监听器，防止内存泄漏和重复绑定。
• 用useState的函数式更新切换状态，避免闭包导致的错误。
• React中要使用className替代class属性。

修改后的完整代码

import React, { useState, useEffect, useRef } from "react";

export default function App() {
  const [listopen, setListopen] = useState(false);
  const dropdownRef = useRef(null);

  const toggleDropdown = () => {
    setListopen(prev => !prev);
  };

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setListopen(false);
      }
    };

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

  return (
    <main>
      <header>
        <nav>
          <ul>
            <div className="dropdown" ref={dropdownRef}>
              <li>
                <button className="dropbtn" onClick={toggleDropdown}>
                  USD
                  <i className="fa fa-caret-down"></i>
                </button>
              </li>
              <div 
                className="dropdown-content" 
                id="myDropdown" 
                style={{ display: listopen ? 'block' : 'none' }}
              >
                <a href="/">Link 1</a>
                <a href="/">Link 2</a>
                <a href="/">Link 3</a>
              </div>
            </div>
          </ul>
        </nav>
      </header>
    </main>
  );
}

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