如何在响应中向组件添加CSS类？

Question

因此，基本上我正在做的是遍历数据数组并创建某种列表。我要在这里实现的是单击CSS类应附加的特定列表项。

迭代生成列表

var sports = allSports.sportList.map((sport) => {
return (
  <SportItem icon= {sport.colorIcon} text = {sport.name} onClick={this.handleClick()} key= {sport.id}/>
)
})

单个列表项

   <div className="display-type icon-pad ">
      <div className="icons link">
        <img className="sport-icon" src={icon}/>
      </div>
      <p className="text-center">{text}</p>
    </div>

我无法弄清楚该如何处理handleClick，因此，如果单击特定列表，它将突出显示。

Answer 1

为每个可以选择的项目保留一个单独的状态变量，并按照 facebook 的建议使用类名库有条件地操作类。

编辑：好的，您提到一次只能选择 1 个元素，这意味着我们只需要存储选择了其中一个元素（我将使用所选项目的 id）。而且我还注意到您的代码中有一个拼写错误，您需要在声明组件时链接该函数，而不是调用它

<SportItem onClick={this.handleClick} ...

（注意如何handleClick不再包含()）。

现在我们将handleClick使用部分应用程序bind方法将元素的 id 与事件一起传递给处理程序：

<SportItem onClick={this.handleClick.bind(this,sport.id} ...

正如我所说，我们希望将所选项目的 id 存储在状态中，因此可能handleClick如下所示：

handleClick(id,event){
this.setState({selectedItemId: id})
...
}

现在我们需要将 传递selectedItemId给SportItem实例，以便它们知道当前的选择：<SportItem selectedItemId={selectedItemId} ...。另外，不要忘记将回调附加onClick={this.handleClick}到需要的位置，调用它将触发父级中状态的更改：

<div onClick={this.props.onClick} className={classNames('foo', { myClass: this.props.selectedItemId == this.props.key}); // => the div will always have 'foo' class but 'myClass' will be added only if this is the element that's currently selected}>
</div>