在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其它相关文章!