Блог

У меня есть этот Codesandbox с меню гамбургеров, которое отказывается onClick работать.

На этом изображении показано простое меню со Timeline ссылкой
(предполагается, что цвет текста белый, но Codesandbox отказывается)
Нажатие на ссылку не запускает onClick , как будто она блокируется другим компонентом.

Я протестировал удаление компонента NavLinkPage , который отображается одновременно, и затем мое меню работает. Похоже, что оно блокирует, даже если оно отключено от экрана.

Я пытался установить, например z-index , но безуспешно, единственное, что работает, — это удаление:

 <NavLinkPage close={close} />..
 

Простое меню — это компонент:

 <SideMenu close={close} />..
 

NavLinkPage контролируются @media (max-width: 1098px).. и будут отображаться только на больших экранах.

вот код CollapseMenu.jsx с NavLinkPage и NavLinkPage :

 import React, { useRef, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import useOnClickOutside from './UseOnClickOutside';
import NavLinkPage from './NavLinkPage';
import SideMenu from './SideMenu';

const CollapseMenu = props => {
    const { show, close } = props;
    const { open } = useSpring({ open: show ? 0 : 1 });

    const reference = useRef();
    useOnClickOutside(reference, close, 'burgerMenu');

    const escFunction = useCallback(
        event => {
            // only accept 27 if it's visible
            if (event.keyCode === 27 amp;amp; show === true) {
                close();
            }
        },
        [close],
    );

    useEffect(() => {
        document.addEventListener('keydown', escFunction, false);
        return () => {
            document.removeEventListener('keydown', escFunction, false);
        };
    }, [escFunction]);

    if (show === true) {
        return (
            <CollapseWrapper
                style={{
                    transform: open
                        .interpolate({
                            range: [0, 0.2, 0.3, 1],
                            output: [0, -20, 0, -200],
                        })
                        .interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
                }}
            >
                <NavLinkPage close={close} />
                <SideMenu close={close} />
            </CollapseWrapper>
        );
    }
    return null;
};

export default CollapseMenu;

const CollapseWrapper = styled(animated.div)`
    background: #2d3436;
    position: fixed;
    left: 0;
    right: 0;
    width: 200px;
    z-index: 100;
`;