色の変更で私は1つを持っている

Question

反応し、以下のようなdiv要素の反復を含むコンポーネントに反応：私は私のonClickメソッドは、私がクリックしたのdivの四角いアイコンの色を変更したい実行すると

render(){ 
    return(
     <div className="col-md-12"> 
     {this.state.pageOfItems.map(opration => 
       <div className=" col-md-4 icondiv" key={opration.id} 
        onClick={this.selectOperation.bind(this,opration,true)}> 
        <FontAwesome name="square" style={{ ariaHidden:true, fontSize:'35px'}}/> 
         <span className="displayblock">{opration.name}</span> 
       </div> 

     )} 
     </div> 
    ); 
} 

今、私の質問は。残りのアイコンの色は同じでなければなりません。今度別のdivのアイコンをクリックすると同じことが起こります。どうすればこれを実現できますか？私は異なったCSSの色を設定することができます知っているどのように特定のdivと色を変更することができますか？

Answer 1

あなたの状態で、メンバー 'selectedOperationId'を追加し、 'selectOperation'コールバックでそれを更新してください。その後

className={operation.id === this.state.selectedOperationId ? "selected col-md-4 icondiv" : "col-md-4 icondiv"} 

のようなあなたのdiv conditionnalyのクラス名を構築し、.selectedクラス