react中动态修改li的样式

2020-08-04  本文已影响0人  ticktackkk

点击谁谁有背景
思路:由于我是动态渲染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>
        );
    }
上一篇下一篇

猜你喜欢

热点阅读