所以基本上我所做的是遍历一组数据并制作某种列表。我在这里想要实现的是点击一个特定的列表项,一个 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,以便在我单击特定列表时它会突出显示。
最佳答案
如果你想突出显示特定的列表项,最好在列表项本身上调用 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>
);
}
});
关于javascript - 如何将 css 类添加到 react 中的组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39108858/