addClass 和removeClass 反应

我想检查目标元素是否包含类。如果没有添加该类，如果是则删除该类。

class Hello extends React.component{
  addActiveClass(e){
     if(e.target.classList.contains("active")){
         //I wanna to add active class to e.target
     }else{
         //I wanna to remove active class from e.target
         //I wanna to do something like e.target.classList.removeClass("atcive");
     }
  }

  render() {
       <div className="red green blue" onClick={this.addActiveClass}>Hello World</div>
       <div className="red green blue" onClick={this.addActiveClass}>Good Bye World</div>

  }
}

我想仅向目标元素添加和删除类，而不是其他元素。

您可以使用状态来存储活动 div，然后有条件地向其添加活动类

class Hello extends React.Component{ /* Be sure to capitalize the C in Component */
  state = {
    active: ''
  }
  addActiveClass(e){
      const clicked = e.target.id
      if(this.state.active === clicked) { 
          this.setState({active: ''});
      } else {
          this.setState({active: clicked})
     }
  }

  render() {
     return (
   <div>
<div className={`red green blue ${this.state.active === "first"? 'active': ''}`} id="first" onClick={this.addActiveClass}>Hello World</div>
<div className={`red green blue ${this.state.active === "second"? 'active': ''}`} id="second" onClick={this.addActiveClass}>Good Bye World</div>
  </div>
     )
  }
}