反应单击外部块

Question

如何做到这一点，以便当您单击.menu__mobile块和他的孩子们时，它不会关闭，而处理程序仍留在汉堡上？我是新来的

起初，我将引用悬挂在菜单块本身上，但是然后，当我单击汉堡包时，它立即将类“ open”放下并重新放置

<Menu ???/>

我能够以这种方式实现这一目标，但是我不确定什么是正确的。

class Header extends Component {
 constructor(props) {
    super(props);
    this.toggleClass = this.toggleClass.bind(this);
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
    this.state = {
        isActive: false
    };
  }
   componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
   }
   componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
   }
   toggleClass() {
    this.setState((prevState) => ({
        isActive: !this.state.isActive
   }));
  }
  setWrapperRef(node) {
    this.wrapperRef = node;
  }
  handleClickOutside(event) {
    if (this.state.isActive && this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        this.setState({isActive:false})
     }
   }
   render() {
    return (
     <header className="header">
      <div className="container">
       <div className="row row__center-item">
        <div className={'col-sm-9 menu__mobile' + (this.state.isActive ? ' open' : '')}>  {/* this menu*/}
         <nav>
          <ul className="menu">
           <li className="menu__item">
            <a href="#about" className="menu__link">About</a>
           </li>
           <li className="menu__item">
            <a href="#why" className="menu__link">Why</a>
           </li>
           <li className="menu__item">
            <a href="#services" className="menu__link">Services</a>
           </li>
           <li className="menu__item">
            <a href="#portfolio" className="menu__link">Portfolio</a>
           </li>
          </ul>
         </nav>
         </div>
         <div className="col-sm-3 col-xs-8 col-7">
          <a href="tel:+222222" className="header__phone">+22222</a>
         </div>
        </div>
       </div>
       <div ref={this.setWrapperRef} className={'burger' + (this.state.isActive ? ' open' : '')} onClick={this.toggleClass}>
       </div>
     </header>