React JS onClickオープンカレントドロップダウンメニュー

Question

React JSのドロップダウンメニュー数はnです。 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がある場合に、これはすべてのメニューのtrigerます。

各メニュー項目のクリック数を確認するには、別の状態が必要です。または[]をクリックして配列を作成します。特定のクリックされた状態の値を変更します。 例： ...

<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(index,e) { 
    let clicked=this.state.clicked; 
    clicked[index]=!clicked[index] 
    this.setState({clicked:clicked}); 
    } 

がcodepenリンクであるとしてhandleClickを定義しますのため、すべてのドロップダウンを選択得ている http://codepen.io/anon/pen/oLRbmq

Answer 2

この<div className={"mega-menu"+" "+this.state.clicked}>、それらはすべて状態と同じ変数 - clickedを使用します。したがって、あなたがそれらのすべてをクリックすると状態を変更します。ドロップダウンを選択するには、対応するすべてのドロップダウン要素の状態で新しい変数を宣言し、それに応じてロジック​​も変更する必要があります。