TypeError：无法读取未定义的属性“切换”-classList.toggle 反应

Question

I need to toggle the css classes of the 3 elements on a single button click. Here is my code.

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;

and below is the css code..

.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) ;
}

and this the solution in vanilla javascript but it is not working in react throws an error says-

TypeError: Cannot read property 'toggle' of undefined

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

kindly help with the solution!

Answer 1

for handleClick function e is event, element that triggered an event is e.target , so to access classList for element you should call e.target.classList.toggle('change')