React下拉菜单内锚点标签点击失效问题求助

云上老周

2026-7-17

解决Dropdown点击内部链接时自动关闭的问题

问题原因

当前Dropdown的外部点击关闭逻辑未排除组件内部元素的点击事件，导致点击链接时，事件冒泡到document触发关闭操作，直接中断了链接跳转流程。

修复方案

通过给Dropdown容器添加ref，在外部点击判断时过滤掉内部元素的点击行为：

添加容器Ref并绑定
在Dropdown组件中创建ref，绑定到组件最外层容器上：

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

const Dropdown = ({ title, items }) => {
  const [isOpen, setIsOpen] = useState(false);
  // 创建容器ref
  const dropdownRef = useRef<HTMLDivElement>(null);

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  // 修改外部点击处理逻辑
  const handleClickOutside = (event: MouseEvent) => {
    // 仅当点击目标不在Dropdown内部时，才关闭组件
    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
      setIsOpen(false);
    }
  };

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

  return (
    {/* 将ref绑定到Dropdown容器 */}
    <div ref={dropdownRef} className={`dropdown ${isOpen ? "open" : ""}`}>
      <button onClick={toggleDropdown} className="dropdown-toggle">
        {title}
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          {items.map((item, index) => (
            <li key={index}>
              <a href={item.url}>{item.label}</a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Dropdown;