React onClick状態が戻っていない

Question

React JSを使用してメニューバーを構築しています。メニュー項目をクリックすると、それぞれのメガメニューが開きます。メガメニューの外側をクリックすると、それは閉じなければなりません。私はmegamenuの状態を切り替えることによってこれを作った。メニュー項目をもう一度クリックすると（メニュー項目をクリックしてメガメニューを閉じたり開いたりする）メガメニューを閉じることもできます。私はここでスタックしています。メニュー項目を2回クリックすると、状態は元に戻りません。

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') 
); 

Codepen Demo

Answer 1

あなたはそれはあなたがボタンhandleOutsideClickをクリックすると、そうでない場合にもトリガされ、あなたが二回this.state.clickedを反転、同様のボタンが含まれてref="megaMenu"を移動する必要があります。また、handleOutsideClickハンドラにeventを渡すのを忘れてしまった。私はあなたのCodepen Demo

を修正しました

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') 
); 

また、それはそれを行うには良い方法だref={el => this.menu = el} のようなコールバック、参考文献を使用することを検討してください。