comment fermer le menu hamburger dans un composant basé sur la classe de réaction

Je travaille sur un composant basé sur les classes de réaction. J'ai un hamburger [https://easyupload.io/isutmy] chaque fois que je clique sur la fermeture du hamburger pour qu'il fonctionne correctement, mais ce dont j'ai besoin, c'est chaque fois que je clique en dehors de la page Web. proche.

veuillez vous référer au code -

import '../scss/header.scss';
import { Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import {routes} from '../routes';
class Header extends Component {
 
 constructor(props) {
 super(props);
 this.state = {
 
 url: window.location.href,
 isOtherPage: true
 }
 this.setState = this.state.url;
 }
 getUrls = (e) => {
 console.log(e.target.pathname);
 const isHomePage = e.target.pathname === '/';
 
 this.menuToggle()
 var element = document.getElementById("header");
 if (isHomePage) {
 element.classList.remove("header2");
 element.classList.add("header1");
 } else {
 element.classList.remove("header1");
 element.classList.add("header2");
 }
 this.setState = { isOtherPage: isHomePage };
 
}
menuToggle = (e) => {
 var menuClass = document.getElementById("menu");
 menuClass.classList.toggle('menuOpen');
 // console.log(e)
}

jsx commence à partir d'ici, veuillez vérifier et fournir la solution où je fais une erreur

 
 return (
 <div>
 <header>
 <div id="header" className={'header header1'}>
 {/* {headerBg} */}
 <div className="topbar">
 <div className="logo">
 <a href="#" className="animated bounceInDown"><img src='/media/logo.png' alt="Logo" /></a>
 </div>
 <div className="menu-cover top-nav">
 <div className="menus">
 <div className="menu-res">
  {/* <h2><i class="fa fa-bars"></i></h2> */}
  <input id="menu-toggle" type="checkbox" />
  <label class='menu-button-container' for="menu-toggle">
  <div onClick={this.menuToggle} class='menu-button'></div>
  </label>
 </div>
 <ul id="menu" className=" menu animated">
  <li><NavLink exact onClick={this.getUrls.bind(this)} to="/" activeClassName="active">Home</NavLink></li>
  <li><NavLink onClick={this.getUrls.bind(this)} to="/about" activeClassName="active" className="">About</NavLink></li>
  <li><NavLink onClick={this.getUrls.bind(this)} to="/careers" activeClassName="active">Career</NavLink></li>
  <li><NavLink onClick={this.getUrls.bind(this)} to="/contact" activeClassName="active">Contact</NavLink></li>
  <a className="login-b" href="">Login</a>
 </ul>
 
 </div>
 </div>
 </div>
 <div className="clearfix"></div>
 </div> </header>
 {this.props.children}
 </div>
 )
}
}
export default Header;```
[1]: https://i.stack.imgur.com/ZBNZG.png

Solution du problème

Je ne peux pas garantir que cela fonctionnera, mais vous pouvez essayer de définir un onBlursur votre <ul>tag

<ul id="menu" className=" menu animated" onBlur={() => callSomeFunctionToSetClassname()}>