Я пишу FlyoutManager, из которого я могу переключать все всплывающие меню в приложении реагирования. Я пытаюсь заставить свойство закрываться при нажатии снаружи. В другом вопросе о stackoverflow я обнаружил, что моя функция щелчка снаружи срабатывает, когда я нажимаю кнопку, чтобы закрыть ее, поэтому она повторно открывает всплывающее меню, поскольку оно дважды переключает состояние меню.

Есть ли у вас идеи, как решить мою проблему?

Вот код заголовка, упрощенный для моей проблемы:

export const Header = () => {
    const {toggleFlyout} = useFlyout();
    return (
        <header>
            <div>
                /*
                    ...
                    Other components
                */
                <nav>
                    /*
                        ...
                        Other buttons
                    */
                    <button id = "UserFlyout" onClick = {() => toggleFlyout("UserFlyout")}>
                        User-logo
                    </button>
                </nav>
            </div>
        </header>
    );
};

Вот папка FlyoutContext, содержащая функцию переключения:

export const FlyoutContext = createContext();

export const FlyoutProvider = ({children}) => {
    const [flyout, setFlyout] = useState(null);
    const [isOpen, setIsOpen] = useState(false)

    const toggleFlyout = name => {
        setIsOpen(!isOpen);
        if (!isOpen) {
            setFlyout(name);
        } else {
            setFlyout(null);
        }
    }

    return (
        <FlyoutContext.Provider value = {{flyout, toggleFlyout}}>
            {children}
        </FlyoutContext.Provider>
    );
};

export const useFlyout = () => useContext(FlyoutContext);

Вот папка FlyoutManager

const FlyoutList = {
    UserFlyout: UserFlyout
};

export const FlyoutManager = () => {
    const {flyout, toggleFlyout} = useFlyout();
    
    const flyoutRef = useRef(null);

    const Flyout = FlyoutList[flyout];

    useEffect(() => {
        const handler = event => {
            if (flyoutRef.current !== null && !flyoutRef.current.contains(event.target)) {
                toggleFlyout(flyout);
            }
        };

        document.addEventListener('mousedown', handler);
        return () => {
            document.removeEventListener('mousedown', handler);
        };
    }, [flyoutRef, flyout, toggleFlyout]);  

    if (!flyout) return null;

    return (
        <Flyout flyoutRef = {flyoutRef}>
            <div ref = {flyoutRef}>
                user flyout
            </div>
        </Flyout>
    );
};

Большое спасибо за вашу помощь

Некоторые идеи могут заключаться в том, чтобы проверить, не является ли целью события mousedown кнопка. Но поскольку я использую контекст, я не могу получить доступ к кнопке id во FlyoutContext.