React JS onClick Открыть текущее раскрывающееся меню

Question

У меня есть n Количество выпадающих меню в React JS. Когда я нажимаю nth пункт меню, я хочу открыть соответствующее выпадающее меню. Но то, что я получаю сейчас, - это щелчок по пункту меню, все раскрывающиеся окна становятся открытыми. Как это можно достичь?

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.refs.megaMenu.contains(event.target)) { 
     this.setState({ 
       clicked: false 
      }); 
     } 
    } 
    render() { 
    return (
     <div className="container"> 
     <div className="menu-bar"> 

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

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

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

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

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

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

Codepen Demo Here

Answer 1

Вы использовали одно состояние для щелкнул т.е. всех пунктов меню, это будет Тригер для всех меню, когда есть SetState называется.

у вас должно быть отдельное состояние для проверки кликов для каждого пункта меню. или сделать массив нажатым []. а затем измените значение определенного состояния щелчка. например: ...

<div className="menu-bar-item" ref="megaMenu"> 
      <a className="menu-bar-link" href="#" onClick={this.handleClick.bind(this,1)}>Second Menu</a> 
      <div className={"mega-menu"+" "+this.state.clicked[1]}> 
       <div className="mega-menu-content"> 
       <p>Second Menu</p> 
       </div> 
      </div> 
      </div> 

.... и определить handleClick, как

handleClick(index,e) { 
    let clicked=this.state.clicked; 
    clicked[index]=!clicked[index] 
    this.setState({clicked:clicked}); 
    } 

вот codepen ссылка: http://codepen.io/anon/pen/oLRbmq

Answer 2

Все выпадающие становятся выбраны из это <div className={"mega-menu"+" "+this.state.clicked}>, все они используют одну и ту же переменную из состояния - clicked, поэтому, если вы нажмете на одну из них, измените состояние. Если вам нужна только спецификация для выпадающего списка, вам нужно объявить новую переменную в состоянии для каждого соответствующего элемента выпадающего списка, а также изменить логику handleClick соответственно.