他の要素をクリックしたときにReactJSのクラスを削除するには？

Question

私はdivでクリックしたときに "selected"クラスを追加し、他の要素から "selected"クラスを削除するメニューナビゲーション用のReactJSアプリケーションを作成しています。 今、私は他の要素からクラスを削除する方法で立ち往生しています ここに私のコードがある

<pre> 
**App.js** 

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     active : "0", 
    } 
    } 
    clickHandler(index){ 

    } 
    render() { 
    let menu = this.props.menu; // menu is a array of page name e.g. ['home','about us','contact us'] 
    let style = 0; 
    return (
      {menu.map((menu, index) => 
      List clickHandler={this.clickHandler.bind(this, index)} index={index} key={index} menu={menu} 

      )} 
    ); 
    } 
} 

export default App; 


** list.js ** 

import React from 'react'; 

class List extends React.Component{ 
    constructor(props){ 
     super(props) 
     this.state = { 
      focused : "0" 
     } 
    } 
    clickMe(index){ 
     let style = ""; 
     this.setState({focused: index}); 
     if(this.state.focused == index){ 
      console.log(index); 
      style = "selected"; 
     } 
     this.props.clickHandler(); 

    } 
    render(){ 
     let style = ""; 
     if(this.state.focused === this.props.index){ 
      style = "selected"; 
     }else{ 
      style = ""; 
     } 
     return li className={style} onClick={this.clickMe.bind(this, this.props.index)}>{this.props.menu} /li> 
    } 
} 

export default List; 

</pre> 

Answer 1

私の提案は、二つの成分

1）リストを作成し、このコンポーネント意志は選択の内部状態数/指数を有しています/集中したアイテム。小道具として、このコンポーネントはアイテムの配列を取得します。レンダリングメソッドでは、親タグ< ol>と</ol>をレンダリングすることができます。このタグでは、アイテムのforeachサイクルリスト、国勢調格のインデックス、foreachサイクルのインデックス、アイテムが選択されているかどうかを計算できます。このコンポーネントには、アイテムコンポーネントに渡す必要のあるこのハンドラの選択されたインデックスを変更するハンドラがあります。

2）2番目のコンポーネントItemli>タグをプロとしてレンダリングします。このコンポーネントは、配列からアイテムを取得し、親リストコンポーネントからのコールバックとして機能し、アイテムが選択されている場合は偽ります（false/true）。

ListコンポーネントからHandlerよりItemをクリックすると、親リスト内の変更状態と呼ばれ、リスト全体が再描画されます。

2番目のコンポーネントItemがcomponentWillReceiveProps（nextProps）メソッドを実装していることを確認してください。選択した小道具を変更したときにレンダリングできるようにする