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

Question

我有一个 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 定义为 Prop

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 在单击事件上正确更新，但事件类检查不起作用。

我添加:

console.log(this.state.selectedColor);

点击后它会正确更新。

Answer 1

您应该使用 this.setState({ selectedColor: currentColor }) 而不是 this.state.selectedColor = currentColor。您永远不应该尝试通过直接向状态属性赋值来更新它们。这可能就是为什么重新渲染也没有被触发的原因。

React 文档中也有说明:state