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

在您所在的州，添加一名成员＆＃39; selectedOperationId＆＃39;并在＆＃39; selectOperation＆＃39;中更新它回调。

然后构建div条件的className，如

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

并为.selected类

制作正确的css

在React中更改图标的颜色

1 个答案: