首页 > 解决方案 > TypeError:无法读取未定义的属性“切换”-classList.toggle 反应

问题描述

我需要通过单击一次按钮来切换 3 个元素的 css 类。这是我的代码。

import React from 'react';
import '../css/MenuIcon.css'

class MenuIcon extends React.Component {

  handleClick = (e) => {  
    e.classList.toggle('change')
  }
  render() { 
    return ( 
        <div className="container" onClick={this.handleClick}>
          <div className="bar1"></div>
          <div className="bar2"></div>
          <div className="bar3"></div>
        </div>

     );
  }
}
export default MenuIcon;

下面是css代码..

.bar1, .bar2, .bar3{
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 transition: 0.4s;

}

.container {
  cursor: pointer;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

这是香草javascript中的解决方案,但它在反应中不起作用会引发错误说-

TypeError:无法读取未定义的属性“切换”

function myFunction(x) {
  x.classList.toggle("change");
}

请帮助解决问题!

标签: javascriptcssreactjs

解决方案


对于handleClick函数e是事件,触发事件的元素是e.target,所以要访问元素的classList,你应该调用e.target.classList.toggle('change')


推荐阅读