在react中如何切换class

在react中如何切换class

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

2. 再通过onclick点击事件

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

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

3. 页面三目运算通过比对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) => {
    // 获取data-index中暂存的索引,通过index的改变来改变样式
    var index = e.target.parentNode.parentNode.getAttribute('data-index'); 
    this.setState({
        activeType: index
    })
}

本文来自React答疑栏目,欢迎学习!

以上就是在react中如何切换class的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读