javascript - 如何在点击文档时关闭菜单(ADDEventListener)

Question

我一直在尝试向文档添加一个 EventListener 来关闭我的菜单，但似乎没有一个 event.stopPropagation();实际上听我说:/有人可以帮我吗？请

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import "./header.css";

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            language : "en"
        }
    }

    openMenu = () => {
        let menuPaths = document.getElementById('menu');
        let hideAnimation = () => {
            menuPaths.classList.remove('animate-left');
            menuPaths.classList.add('animate-right');
        }
        let showAnimation = () => {
            menuPaths.classList.remove('animate-right');
            menuPaths.classList.add('animate-left');
        }
        menuPaths.classList.toggle('show');
        if(menuPaths.classList.contains('show')) {
            showAnimation();
        } else {
            hideAnimation();
        }
    } 

    render() {
        //user logged in? render nav. Else, render login/signup
        const userAction = (
            <div className='header_action'>
                <button className='header_action_signup orange-md-btn'>SIGN UP</button>
                <button className='header_action_login orange-md-btn'>LOGIN</button>
            </div>
        )

        return (
            <div className='header'>
                <div className="header_menu">
                    <img onClick={event => {
                        event.stopPropagation();
                        return this.openMenu(event);
                    }} src={require("./pictures/hamburger_menu.svg")}/>
                </div>
                <div className='header_paths' id="menu">
                    <NavLink to='/index/acceuil'>Home</NavLink>
                    <NavLink to='/index/how'>How does it work</NavLink>
                    <a href= {BLOG_URL + '/'+ this.state.language +'/'}>Blog</a>
                    <a href={BLOG_URL + '/media/'}>Media</a>
                    <NavLink to='/index/contact'>Contact Us</NavLink>
                    <a href={PUBLIC_MARKETPLACE}>Marketplace</a>
                    <a href="#">Fr</a>
                </div>
                <NavLink to='/index/acceuil' className='header_logo' >
                    <img src={require("./pictures/logo_march2.png")}/>
                </NavLink>
                {userAction}
            </div>
        )
    }
}

export default Header;

这是我尝试在 openMenu 函数中添加的内容

document.addEventListener("click", function(event) {
            event.stopPropagation();
            document.removeEventListener("click", this.hideAnimation());
})

我还尝试在 componentDidMount 中单击时附加removeEventHandler，但这不起作用，并且我尝试了 event.preventDefault(); 的多种组合。我在使用 jQuery 之前就得到了它，但是现在我必须使用 React，我不想与 jQuery 混合。有任何想法吗？

Answer 1

1. 首先，您需要使用状态切换菜单，但不能直接更改 DOM。
2. 据我了解您的问题，您希望在单击菜单外部时关闭菜单。如果是这样，您可能想使用 react-onclickoutside并创建 handleClickOutside 函数并将其传递给 HOC。