點擊誰誰有背景
思路:由于我是動態(tài)渲染li標(biāo)簽所以,可以拿到li標(biāo)簽的index值,可以通過我們點擊的那個li標(biāo)簽的下標(biāo)index是否與我們設(shè)定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>
);
}