React点击外部功能失效：react-detect-click-outside使用异常排查

问题描述 #

使用react-detect-click-outside实现点击外部关闭菜单功能，点击按钮时将对应菜单标识赋值给openMenu状态，当openMenu匹配对应值时显示菜单。目前menus.nav和menus.cart功能失效，仅menus.auth能正常工作，相关代码如下：

import { useState } from 'react'
import { useDetectClickOutside } from 'react-detect-click-outside'

export default function Header() {
    const menus = {
        nav: 'nav',
        cart: 'cart',
        auth: 'auth'
    }

    const [openMenu, setOpenMenu] = useState<string>('')
    const refMenu = useDetectClickOutside({
        onTriggered: () => {
            console.log(openMenu);
            setOpenMenu('');
            console.log(openMenu);
        }
    });


    return (
        <ul className="flex items-center">

            <li ref={refMenu} className="relative flex items-center">

                <button type="button" onClick={() => setOpenMenu(menus.nav)}>
                    openNav
                </button>

                {(menus.nav == openMenu) && (<ul className="dropdown">

                </ul>
                )}
            </li>


            <li ref={refMenu}>
                <button type="button" onClick={() => setOpenMenu(menus.cart)}>
                    openCart
                </button>

                {(openMenu == menus.cart) &&
                    (<div className="dropdown">


                    </div>)
                }
            </li >

            <li className="relative flex items-center" ref={refMenu}>

                <button type="button" onClick={() => setOpenMenu(menus.auth)}>
                    openAuth
                </button>

                {(openMenu == menus.auth) && (<ul className="dropdown">


                </ul>)}
            </li>
        </ul>
    )
}

问题根源 #

核心问题是同一个refMenu被多个<li>元素重复引用。在React中，单个ref对象只能绑定到一个DOM元素，当你将同一个ref赋值给多个元素时，只有最后一个元素会成功绑定ref，前面的绑定会被覆盖。因此只有最后一个auth菜单的ref生效，nav和cart的ref未被正确绑定，导致点击外部关闭的逻辑只对auth菜单起作用，同时干扰另外两个菜单的功能。

修复方案 #

为每个菜单创建独立的ref，或者将ref绑定到包含所有菜单的父容器，结合状态判断实现点击外部关闭的逻辑。以下提供两种可行方案：

方案1：为每个菜单创建独立ref #

为每个菜单单独创建ref，在点击外部时判断当前打开的菜单，仅关闭对应菜单：

import { useState } from 'react'
import { useDetectClickOutside } from 'react-detect-click-outside'

export default function Header() {
    const menus = {
        nav: 'nav',
        cart: 'cart',
        auth: 'auth'
    }

    const [openMenu, setOpenMenu] = useState<string>('')
    
    // 为每个菜单创建独立的点击外部检测ref
    const navRef = useDetectClickOutside({
        onTriggered: () => openMenu === menus.nav && setOpenMenu('')
    });
    const cartRef = useDetectClickOutside({
        onTriggered: () => openMenu === menus.cart && setOpenMenu('')
    });
    const authRef = useDetectClickOutside({
        onTriggered: () => openMenu === menus.auth && setOpenMenu('')
    });

    // 通用切换函数：点击按钮切换菜单显示/隐藏
    const toggleMenu = (menuKey) => {
        setOpenMenu(prev => prev === menuKey ? '' : menuKey)
    }

    return (
        <ul className="flex items-center">
            <li ref={navRef} className="relative flex items-center">
                <button type="button" onClick={() => toggleMenu(menus.nav)}>
                    openNav
                </button>
                {openMenu === menus.nav && (
                    <ul className="dropdown">
                        {/* 导航菜单内容 */}
                    </ul>
                )}
            </li>

            <li ref={cartRef} className="relative flex items-center">
                <button type="button" onClick={() => toggleMenu(menus.cart)}>
                    openCart
                </button>
                {openMenu === menus.cart && (
                    <div className="dropdown">
                        {/* 购物车菜单内容 */}
                    </div>
                )}
            </li>

            <li ref={authRef} className="relative flex items-center">
                <button type="button" onClick={() => toggleMenu(menus.auth)}>
                    openAuth
                </button>
                {openMenu === menus.auth && (
                    <ul className="dropdown">
                        {/* 授权菜单内容 */}
                    </ul>
                )}
            </li>
        </ul>
    )
}

方案2：绑定ref到父容器（更简洁） #

将ref绑定到包含所有菜单的父容器，点击容器外部时直接清空openMenu状态，关闭所有菜单：

import { useState } from 'react'
import { useDetectClickOutside } from 'react-detect-click-outside'

export default function Header() {
    const menus = {
        nav: 'nav',
        cart: 'cart',
        auth: 'auth'
    }

    const [openMenu, setOpenMenu] = useState<string>('')
    // 将ref绑定到整个菜单容器
    const headerRef = useDetectClickOutside({
        onTriggered: () => setOpenMenu('')
    });

    const toggleMenu = (menuKey) => {
        setOpenMenu(prev => prev === menuKey ? '' : menuKey)
    }

    return (
        <ul ref={headerRef} className="flex items-center">
            <li className="relative flex items-center">
                <button type="button" onClick={() => toggleMenu(menus.nav)}>
                    openNav
                </button>
                {openMenu === menus.nav && (
                    <ul className="dropdown">
                        {/* 导航菜单内容 */}
                    </ul>
                )}
            </li>

            <li className="relative flex items-center">
                <button type="button" onClick={() => toggleMenu(menus.cart)}>
                    openCart
                </button>
                {openMenu === menus.cart && (
                    <div className="dropdown">
                        {/* 购物车菜单内容 */}
                    </div>
                )}
            </li>

            <li className="relative flex items-center">
                <button type="button" onClick={() => toggleMenu(menus.auth)}>
                    openAuth
                </button>
                {openMenu === menus.auth && (
                    <ul className="dropdown">
                        {/* 授权菜单内容 */}
                    </ul>
                )}
            </li>
        </ul>
    )
}

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