更改顏色作出反應

我有一個陣營包含的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> 
    ); 
}

現在我的問題是，當我在我的onClick execute方法我想改變點擊div的方形圖標的顏色。其餘圖標的顏色應該相同。現在，當我點擊另一個div的圖標時，應該會發生同樣的情況。我怎樣才能做到這一點。我知道我可以設置不同的CSS顏色，但我怎樣才能識別特定的div和改變顏色？

來源

2017-06-27 realcodes

考慮接受工作的答覆！ https://stackoverflow.com/help/accepted-answer ..每次你接受一個答案你就獲得2個代表點！ –

在您的狀態下，添加一個成員'selectedOperationId'並將其更新到'selectOperation'回調中。

然後建立自己的DIV conditionnaly的類名像

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

，並作出適當的CSS .selected類

來源

2017-06-27 22:07:45

謝謝，它的工作 – realcodes

@realcodes很高興它的工作，你應該將這個答案標記爲接受的答案，以便其他具有相同問題的人可以很快知道這是有幫助的。 –

更改顏色作出反應

回答

相關問題