在 React 中更改图标的颜色

Question

我有一个 React 组件，其中包含 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 方法时，我想更改单击的 div 的方形图标颜色。剩余图标的颜色应该相同。现在，当我单击另一个 div 的图标时，应该会发生同样的情况。我怎样才能做到这一点。我知道我可以将 css 颜色设置为不同但如何识别特定的 div 并更改颜色？

Answer 1

在您所在的州，添加成员“selectedOperationId”并在“selectOperation”回调中更新它。

然后像这样构建你的 div 的 className

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

并为 .selected 类制作适当的 css