Javascript 单击按钮时，使用reactjs更改已单击按钮的类名以及该组中的其他按钮

我有一个带有3个按钮的react组件。单击组中的任何按钮时，仅该按钮的类名应附加“活动”。其余两个按钮的类名中不应包含“active”。有人能帮我解决这个问题吗。我是新来的。我不确定如何为每个按钮添加/删除“活动”按钮。请帮忙

state={
  active:false, 
 }

handleEnvClick() {
    console.log(this.state.active)
    this.setState=({
     active:true,
   })
}


<div className="EnvGroupButtonsMain">
<button onClick={() => this.handleEnvClick("Dev")} className="envButton">Dev</button>
<button onClick={()=>this.handleEnvClick("QA")} className="envButton">QA</button>
<button onClick={()=>this.handleEnvClick("Prod")} className="envButton">Prod</button>
</div>

状态={
活动：错误，
}
handleEnvClick（）{
console.log（this.state.active）
这是我的国家=({
主动：对，
})
}
this.handleEnvClick（“Dev”）}className=“envButton”>Dev
this.handleEnvClick（“QA”）}className=“envButton”>QA
this.handleEnvClick（“Prod”）}className=“envButton”>Prod

---

顺便说一句，${variable}是模板文本，以防您不知道。它们很酷：D.

你可以这样做：

state={
  activeButton: 0, 
 }

handleEnvClick(clicked) {
    console.log(this.state.active)
    let active = 0;
    if(clicked == "Dev")
      active = 1;
    if(clicked == "QA")
      active = 1;
    if(clicked == "Prod")
      active = 1;
    this.setState=({
     activeButton:active,
   })
}


<div className="EnvGroupButtonsMain">
<button  onClick={() => this.handleEnvClick("Dev")} className="{envButton "+(this.state.activeButton == 1? "active":"")}>Dev</button>
<button onClick={()=>this.handleEnvClick("QA")} className="envButton "+(this.state.activeButton == 2? "active":"")>QA</button>
<button onClick={()=>this.handleEnvClick("Prod")} className="envButton "+(this.state.activeButton == 3? "active":"")>Prod</button>
</div>

状态={
活动按钮：0，
}
handleEnvClick（已单击）{
console.log（this.state.active）
设active=0；
如果（单击==“开发”）
主动=1；
如果（单击==“QA”）
主动=1；
如果（单击==“产品”）
主动=1；
这是我的国家=({
活动按钮：活动，
})
}
this.handleEnvClick（“Dev”）}className=“{envButton”+（this.state.activeButton==1？”active:”）}>Dev
this.handleEnvClick（“QA”）}className=“envButton”+（this.state.activeButton==2？“active”：“）>QA
this.handleEnvClick（“Prod”）}className=“envButton”+（this.state.activeButton==3？“active”：“）>Prod

那么，如果单击了另外两个按钮，是否要使其处于非活动状态？

.activeEnv{
//custom css
}
.inActiveEnv{
//custom css
}

state={
  activeButton: 0, 
 }

handleEnvClick(clicked) {
    console.log(this.state.active)
    let active = 0;
    if(clicked == "Dev")
      active = 1;
    if(clicked == "QA")
      active = 1;
    if(clicked == "Prod")
      active = 1;
    this.setState=({
     activeButton:active,
   })
}


<div className="EnvGroupButtonsMain">
<button  onClick={() => this.handleEnvClick("Dev")} className="{envButton "+(this.state.activeButton == 1? "active":"")}>Dev</button>
<button onClick={()=>this.handleEnvClick("QA")} className="envButton "+(this.state.activeButton == 2? "active":"")>QA</button>
<button onClick={()=>this.handleEnvClick("Prod")} className="envButton "+(this.state.activeButton == 3? "active":"")>Prod</button>
</div>