react 实现点击切换class（详细）

点击切换样式，

通过for循环将索引(index)暂存至data-index中，

再通过onclick点击事件

e.target.parentNode.parentNode.getAttribute(‘data-index’);

来获取当前点击的索引值，最后将索引值存到state中。

页面三目运算通过比对state中暂存的索引值和当前dom元素的索引值的改变来决定是否显示class-student-list-active

基本就是通过改变state中的activeType值来实现样式切换的效果。

this.state = {

            activeType: 0

        }

 

这里面的 i 是for循环的 i

<div className={this.state.activeType == i ? 'class-student-list class-student-list-active' : 'class-student-list'} onClick={this.handleSiblingsClick} data-index={i}>

 

 

handleSiblingsClick = (e) => {

        var index = e.target.parentNode.parentNode.getAttribute('data-index'); // 获取data-index中暂存的索引，通过index的改变来改变样式

        this.setState({

            activeType: index

        })

    }