react中動態(tài)修改li的樣式

點擊誰誰有背景
思路:由于我是動態(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>
        );
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容