美文网首页
react中动态修改li的样式

react中动态修改li的样式

作者: ticktackkk | 来源:发表于2020-08-04 17:42 被阅读0次

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

    相关文章

      网友评论

          本文标题:react中动态修改li的样式

          本文链接:https://www.haomeiwen.com/subject/wswirktx.html