在 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' 回调中更新它。

然后构建 class您的 div 条件的名称，就像

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

并为 .selected class

制作正确的 css

在 React 中更改图标的颜色

Change Color of Icon in React

html

javascript

css

reactjs

react-jsx