react中动态修改li的样式

点击谁谁有背景
思路:由于我是动态渲染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>
        );
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。