点击谁谁有背景
思路:由于我是动态渲染li标签所以,可以拿到li标签的index值,可以通过我们点击的那个li标签的下标index是否与我们设定state的index值相等,如果相等就添加样式,否则无
constructor(props) {
super(props);
this.state = {
List: [123, 465, 798, 999],
index: 0
};
}
changeBgc = (color) => {
this.setState({
index: color
})
}
render() {
return (
<ul>
{this.state.List.map((item, index) => {
return (
<li style={{ listStyle: 'none' }} onClick={this.changeBgc.bind(this,index)} className={this.state.index === index ? 'active' : null} key={index}>{item}</li>
)
})}
</ul>
);
}
网友评论