javascript - 有条件地应用点击更改的类

我也有一个React组件，我也试图设置一个“活动”类。这是我用来测试是否应该设置活动类的代码。

  {sku.colors &&
  (<div className="swatches" styleName="swatches">
      <span className="color" styleName="color" data-name="color">
    {sku.colors.map((option, index) => {
      return(
        <span className={this.state.selectedColor === option.name ? 'active': ''} styleName="swatch" onClick={this.onColorChange.bind(this, option.name)} style={{backgroundImage: 'url(' + swatchImg + ')' }} key={index}>{option.name}</span>
      )
    })}
    </span>
  </div>)
}

我将state.selectedColor定义为道具

constructor(props) {
super(props);

this.state = { selectedColor: 'Black' };
}

这是我的onClick函数：

onColorChange(currentColor){
//add sizes for this color
this.state.selectedColor = currentColor;
}

问题是仅在首次加载组件时才检查是否selectedColor = option.name。在onClick函数触发后，不会再次进行检查，因此永远不会更新活动类。

我想我可能需要在onClick事件之后重新渲染该部分。有没有人对解决此问题有任何意见/建议？

编辑：我可以看到state.selectedColor在click事件上正确更新，但是活动类检查不起作用。

我补充说：

console.log(this.state.selectedColor);

并在点击时正确更新。

最佳答案

尝试这个：