Farbe ändern von Icon in React

Question

Ich habe eine eine Komponente reagieren, die wie unter Iteration von div Elemente enthält:

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> 
    ); 
} 

Nun meine Frage ist, wenn ich meine onClick Methode, die ich angeklickt divs wollen execute auf quadratisches Symbol Farbe ändern . Die Farbe des verbleibenden Symbols sollte gleich sein. Wenn ich nun auf das Symbol eines anderen Div klickte, sollte das gleiche passieren. Wie kann ich das erreichen? Ich weiß, dass ich css Farbe zu unterschiedlichem aber wie kann ich bestimmtes div kennzeichnen und Farbe ändern kann?

Answer 1

Fügen Sie in Ihrem Status ein Mitglied 'selectedOperationId' hinzu und aktualisieren Sie es im Callback 'selectOperation'.

bauen dann den Klassenname Ihrer div conditionnaly wie

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

und die richtige CSS machen für .selected Klasse