我有一个带有 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>
最佳答案
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。
关于javascript - 单击按钮时,使用reactjs更改单击按钮以及该组中其他按钮的类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61663693/