Javascript React-onClick状态未切换回

我正在使用React JS构建一个菜单栏。单击菜单项时，应打开相应的megamenu。在megamenu外部单击时，它应自动关闭。我通过切换megamenu的状态来实现这一点。但我还想在第二次单击菜单项时关闭megamenu（即通过单击菜单项切换megamenu的关闭和打开）。我被困在这里，第二次单击菜单项时，状态没有切换回来

class Menubar extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }

  componentWillMount() {
    document.addEventListener('click', this.handleOutsideClick, false);
  }

  componentWillUnmount(){
    document.removeEventListener('click', this.handleOutsideClick, false);
  }

  handleClick() {
    this.setState({clicked: !this.state.clicked});
  }

  handleOutsideClick(){
    if (this.refs.megaMenu.contains(event.target)) {
      } else {
        this.setState({
          clicked: false
        });
      }
   }

   render() {
    return (
      <div className="container">
        <div className="menu-bar">
          {/* Menu*/}
          <div className="menu-bar-item">
            <a className="menu-bar-link" href="#" onClick={this.handleClick}>Points</a>
            <div className={"mega-menu"+" "+this.state.clicked} ref="megaMenu">
              <div className="mega-menu-content">
                <p>Points Menu</p>
              </div>
            </div>
          </div>
        </div>
      </div>
     );
   }
}

ReactDOM.render(
  <Menubar />,
  document.getElementById('example')
);

类菜单栏扩展了React.Component{
构造函数（）{
超级（）；
此.state={
单击：false
};
this.handleClick=this.handleClick.bind（this）；
this.handleOutsideClick=this.handleOutsideClick.bind（this）；
}
组件willmount（）{
document.addEventListener（'click'，this.handleOutsideClick，false）；
}
组件将卸载（）{
document.removeEventListener（'click'，this.handleOutsideClick，false）；
}
handleClick（）{
this.setState（{单击：！this.state.clicked}）；
}
handleOutsideClick（）{
if（this.refs.megaMenu.contains（event.target））{
}否则{
这是我的国家({
单击：false
});
}
}
render（）{
返回(
{/*菜单*/}
积分菜单

);
}
}
ReactDOM.render(
,
document.getElementById（'示例'）
);

---

您需要移动

ref=“megaMenu”

，以便它也包括按钮，否则当您单击按钮

手柄时，也会触发外侧单击，您翻转
此状态。单击两次。另外，您忘记在
handleOutside单击
handle中传递
事件

class Menubar extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }

  componentWillMount() {
    document.addEventListener('click', this.handleOutsideClick, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleOutsideClick, false);
  }

  handleClick() {
    this.setState({clicked: !this.state.clicked});
  }

  handleOutsideClick(event) {
    if (!this.menu.contains(event.target)) {
      this.setState({
        clicked: false
      });
    }
  }

  render() {
    return (
      <div className="container">
        <div className="menu-bar">

          {/* Menu*/}
          <div className="menu-bar-item" ref={el => this.menu = el}>
            <a className="menu-bar-link" href="#" onClick={this.handleClick}>Points</a>
            <div className={"mega-menu" + " " + this.state.clicked}>
              <div className="mega-menu-content">
                <p>Points Menu</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Menubar />,
  document.getElementById('example')
);

类菜单栏扩展了React.Component{
构造函数（）{
超级（）；
此.state={
单击：false
};
this.handleClick=this.handleClick.bind（this）；
this.handleOutsideClick=this.handleOutsideClick.bind（this）；
}
组件willmount（）{
document.addEventListener（'click'，this.handleOutsideClick，false）；
}
组件将卸载（）{
document.removeEventListener（'click'，this.handleOutsideClick，false）；
}
handleClick（）{
this.setState（{单击：！this.state.clicked}）；
}
handleOutsideClick（事件）{
如果（！this.menu.contains（event.target））{
这是我的国家({
单击：false
});
}
}
render（）{
返回(
{/*菜单*/}
this.menu=el}>
积分菜单

);
}
}
ReactDOM.render(
,
document.getElementById（'示例'）
);

我已经把你的头发修好了

还考虑使用回调引用，如<代码> REF= {EL＝>此。菜单= EL}
这是一个更好的方法。
谢谢你用你的答案解释我的错误：）