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

如果要突出显示特定列表项，最好在列表项本身上调用handleClick函数，并且可以使用此方法更准确地添加CSS类，

这是我实现单个列表组件的示例代码

var SingleListItem = React.createClass({
getInitialState: function() {
    return {
        isClicked: false
    };
},
handleClick: function() {
    this.setState({
        isClicked: true
    })
},
render: function() {
    var isClicked = this.state.isClicked;
    var style = {
        'background-color': ''
    };
    if (isClicked) {
        style = {
            'background-color': '#D3D3D3'
        };
    }
    return (
        <li onClick={this.handleClick} style={style}>{this.props.text}</li>
    );
  }
});

Answer 2

为每个可以选择的项目保留一个单独的state变量，并使用classnames库有条件地将类操作为facebook recommends。

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

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

（注意handleClick不再包含()的方式）。

现在我们将使用partial application - handleClick方法将元素的id和事件一起传递给bind处理程序：

<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>

如何将css类添加到react中的组件？

2 个答案: