React：キーでマップされた要素のクラスを切り替えるにはhandleclickを使用

Question

私はReactのドキュメントを参照し、対応する要素（同じキーに関連付けられている）のクリックに基づいてマップ内の1つの要素の条件を変更しようとしています。 。このようになりますhandleClickを使用する：

handleClick: function(e) { 
    this.setState({condition: !this.state.condition}); 
    console.log('clicked' + e); 
} 

私がこのように描かれた、いくつかのメニュー項目があります。

return (
    <li key={i}> 
     <a 
      onClick={_this.handleClick.bind(_this, i)} 
      data-nav={'nav-' + el.label.en.toLowerCase()}> 
      {el.label.en} 
     </a> 
    </li> 
); 

そしてクラスIは、上記のクリックに基づいて切り替えたいいくつかのサブメニューセクション：

return (
    <section 
     className={_this.state.condition ? "active" :""} 
     key={i} 
     id={'nav-' + el.label.en.toLowerCase()}> 
     <ul> 
      <GetChildren data={el.children} /> 
     </ul> 
    </section> 
); 

明らかに、最初のボタンをクリックすると、すべての要素がそのクラスを切り替えます。私の人生にとって、私はキーを渡す方法を理解することができないので、アイテム1をクリックすると、キー{1}のセクションは "アクティブ"クラスを取得し、他のセクションはキーを取得しません。 jqueryを使用したjavascriptでは、データ属性を使用して取得できました。私は反応が単純な方法を持っていると確信しています。私は理解していないだけです。

Answer 1

これを行うには、状態を切り替えるのではなく、状態オブジェクトのアクティブなキーを設定します。

だからあなた​​

this.setState({ 
    activeKey: e 
}); 

で、あなたの<section>

className={_this.state.activeKey === i ? "active" : ""}