React多Dropdown组件点击空白区域无法关闭的问题求助

架构老林

2026-4-20

各位大佬好，我最近在实现React的Dropdown组件时碰到了一个卡了好久的问题，想请大家帮忙分析下：

我写的Dropdown组件，单个使用的时候完全正常——点击组件展开下拉菜单，点击页面空白区域就能关掉它。但一旦页面上放了2个甚至3个这个Dropdown组件，点击空白区域就完全没效果了，已经打开的下拉菜单关不掉，这跟我预期的“不管有多少个Dropdown，点击空白都能关闭所有下拉菜单”的效果完全不符。

下面是我写的Dropdown组件代码：

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

type DropdownProps = {
  className?: string;
  handleSelectLanguage?: (language: string) => void;
  text: string;
  items: string[];
};

export const Dropdown: React.FC<DropdownProps> = (props) => {
  const [open, setOpen] = useState(false);
  const [text, setText] = useState(props.text);
  const ref = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    setOpen(!open);
  };

  useEffect(() => {
    setText(props.text);
  }, [props.text]);

  useEffect(() => {
    console.log('open1: ', open);
    function handleOutsideClick(e: MouseEvent) {
      e.stopImmediatePropagation();
      console.log('open2: ', open);
      const [target] = e.composedPath();
      console.log('target:', !ref.current?.contains(target as Node), open);
      if (!ref.current?.contains(target as Node) && open) {
        console.log('2');
        setOpen(false);
      }
    }

    document.body.addEventListener('click', handleOutsideClick, false);
    return () => {
      document.body.removeEventListener('click', handleOutsideClick, false);
    };
  }, [open]);

  return (
    <>
      <div className={`dropdown relative ${props.className}`} ref={ref}>
        <button
          className="w-full flex justify-center items-center rounded text-sm px-2 py-1 hover:bg-[#e3e3e3] border"
          style={{ display: 'flex' }}
          onClick={handleClick}
        >
          <span>{text}</span>
          <span className="test relative top-[1px] ml-1">
            <svg
              viewBox="0 0 12 12"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
              className="w-3 h-3"
            >
              <path d="M8.77814 4.00916C8.58288 3.8139 8.26629 3.8139 8.07103 4.00916L5.89096 6.18923L3.77338 4.07164C3.57811 3.87638 3.26153 3.87638 3.06627 4.07164L2.71272 4.42519C2.51745 4.62046 2.51745 4.93704 2.71272 5.1323L5.54114 7.96073C5.7364 8.15599 6.05299 8.15599 6.24825 7.96073L6.6018 7.60718C6.61932 7.58966 6.63527 7.57116 6.64965 7.55186L9.13169 5.06982C9.32695 4.87456 9.32695 4.55797 9.13169 4.36271L8.77814 4.00916Z" />
            </svg>
          </span>
        </button>
        {open && (
          <ul
            className={`dropdown-ul z-2 absolute mt-1 w-full rounded bg-[#efefef] ring-1 ring-gray-300 max-h-52 overflow-y-auto`}
          >
            {props.items.map((item, index) => {
              return (
                <li
                  key={index}
                  className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none hover:bg-[#e3e3e3]"
                  onClick={() => {
                    setOpen(false);
                    setText(item);
                    props.handleSelectLanguage && props.handleSelectLanguage(item);
                  }}
                >
                  {item}
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </>
  );
};

我折腾了好半天都没搞定，最后暂时用了第三方的Dropdown组件凑活，但还是想搞明白自己写的这个问题出在哪，该怎么修复。麻烦各位大佬帮忙看看，谢谢啦！

问题分析与解决方案

问题根源

你代码里的e.stopImmediatePropagation()是核心问题！当页面上有多个Dropdown时，第一个触发handleOutsideClick的组件会调用这个方法，直接阻止了后续其他Dropdown的点击监听函数执行，导致它们无法判断是否需要关闭自己。另外每个Dropdown独立维护open状态，加上监听函数依赖open频繁绑定解绑，进一步加剧了逻辑混乱。

修复方案1：移除事件阻止传播，调整监听逻辑

最简单的修复就是去掉e.stopImmediatePropagation()，让所有Dropdown的监听函数都能正常执行。修改后的useEffect部分代码如下：

useEffect(() => {
  function handleOutsideClick(e: MouseEvent) {
    // 移除e.stopImmediatePropagation()
    const target = e.target as Node;
    // 当当前Dropdown是打开状态，且点击目标不在当前组件范围内时，关闭它
    if (open && !ref.current?.contains(target)) {
      setOpen(false);
    }
  }

  document.body.addEventListener('click', handleOutsideClick);
  return () => {
    document.body.removeEventListener('click', handleOutsideClick);
  };
}, [open]);

这样修改后，每个Dropdown都会独立判断点击事件是否发生在自己外部，只要是打开状态就会关闭。而且点击其中一个Dropdown展开时，其他已经打开的Dropdown也会因为body的点击事件触发而自动关闭，符合常见的下拉交互逻辑。

修复方案2：统一管理所有Dropdown的状态（更优雅的方案）

如果希望更精准地控制所有Dropdown的状态，比如只允许同时打开一个Dropdown，可以把状态提升到父组件或者用React Context来统一管理：

在父组件中维护一个状态，比如activeDropdownId，记录当前打开的Dropdown的唯一标识；
Dropdown组件接收isOpen和onToggle属性，由父组件控制打开/关闭；
只在父组件中添加一次body的点击监听，点击空白时将activeDropdownId设为null，关闭所有下拉。

这种方式能更好地把控全局状态，避免多个组件各自监听带来的潜在问题。

备注：内容来源于stack exchange，提问作者water_ak47

React多Dropdown组件点击空白区域无法关闭的问题求助

问题分析与解决方案 #

问题根源

修复方案1：移除事件阻止传播，调整监听逻辑

修复方案2：统一管理所有Dropdown的状态（更优雅的方案）

问题分析与解决方案