при нажатии кнопки измените имя класса нажатой кнопки, а также других кнопок в этой группе, используя reactjs

Question

У меня есть компонент React с 3 кнопками. При нажатии любой кнопки в группе к имени класса должно быть добавлено слово «активный» только для этой кнопки. Остальные две кнопки не должны содержать слово «активный» в именах классов. Может ли кто-нибудь помочь мне с этим сценарием. Я новичок в 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
}

Btw ${variable} - это литералы шаблона, если вы не знали. Они классные: D.

Answer 2

Можно сделать примерно так:

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>