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

Question

我有一个带有 3 个按钮的 React 组件。单击组中的任何按钮时，仅针对该按钮，类名称应附加“active”。其余两个按钮的类名称中不应包含“active”。有人可以帮我解决这种情况吗？我是 react 新手。我不确定如何为每个按钮添加/删除“事件”。请帮忙。

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>

Answer 1

state={
  selectedButton:""
 }

handleEnvClick(selectedButton) {
    this.setState=({
    selectedButton:selectedButton
   })
}


<div className="EnvGroupButtonsMain">
<button onClick={() => this.handleEnvClick("dev")} className={`${this.state.selectedButton==='dev'?'activeEnv':'inActiveEnv'}`}>Dev</button>
<button onClick={()=>this.handleEnvClick("qa")} className={`${this.state.selectedButton==='qa'?'activeEnv':'inActiveEnv'}`}>QA</button>
<button onClick={()=>this.handleEnvClick("prod")} className={`${this.state.selectedButton==='prod'?'activeEnv':'inActiveEnv'}`}>Prod</button>
</div>

您现在可以在样式表中包含以下内容:-

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

顺便说一句 ${variable} 是模板文字，以防您不知道。他们很酷:D。