Reagieren onClick-Status wird nicht zurückgesetzt

Question

Ich baue eine Menüleiste mit React JS. Wenn Sie auf einen Menüpunkt klicken, sollte das entsprechende Megamenu geöffnet werden. Beim Klicken außerhalb des Megamenus sollte es sich schließen. Ich habe das gemacht, indem ich den Zustand des Megamenu umgeschaltet habe. Aber ich möchte auch das Megamenu schließen, wenn das Menüelement zum zweiten Mal angeklickt wird (d. H. Schließen und Öffnen von Megamenu durch Anklicken von Menüelement). Ich stecke hier fest, wenn ich beim zweiten Mal auf den Menüpunkt klicke, wechselt der Zustand nicht zurück.

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

Sie müssen auch ref="megaMenu" so enthält es Knopf bewegen, wenn Sie sonst auf die Schaltfläche klicken handleOutsideClick wird auch ausgelöst und Sie this.state.clicked zweimal drehen. Außerdem haben Sie vergessen, event in handleOutsideClick Handler zu übergeben.

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

Ich habe feste Ihre Codepen Demo

Bedenken Sie auch Callback-Refs mit wie ref={el => this.menu = el} Es ist ein besserer Weg, es zu tun.