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













