我在ReactJS和SemanticUI中有两个按钮。单击每个时,背景颜色都会改变。我想一次只激活一个按钮,这意味着如果单击红色的按钮,则绿色的按钮将停用,反之亦然,并恢复默认的白色背景色。现在,可以同时单击两者并更改颜色。
这是我的组件:
export class BoutonRefus extends Component {
constructor(props) {
super(props);
this.state = {
button: true
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
button: !this.state.button
});
}
render() {
return (
<>
<div
className={
this.state.button
? "ui button medium refus true"
: "ui button medium refus false"
}
onClick={this.handleClick}
></div>
</>
);
}
}
export class BoutonAccepte extends Component {
constructor(props) {
super(props);
this.state = {
button: true
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
button: !this.state.button
});
}
render() {
return (
<>
<div
className={
this.state.button
? "ui button medium accepte true"
: "ui button medium accepte false" &&
}
onClick={this.handleClick}
></div>
</>
);
}
}
此组件在这里称为:
boutonAccepter(t) {
return (
<>
<BoutonAccepte
className="ui button medium accepte true"
onClick={() => {this.voter(true)}}
text={t('flot.split.vote.accepter')}
/>
</>
)
}
boutonRefuser(t) {
return (
<>
<BoutonRefus
className="ui button medium refus true"
onClick={() => {
this.justifierRefus()
this.voter(false)
}}
text={t('flot.split.vote.refuser')}
/>
</>
)
}
您不需要一个类组件。只需将useState()
钩子用于您的本地状态并制作一个功能组件。同样,为每个按钮制作不同的组件似乎是多余的。试试这个,只需粘贴您的课程名称:)
function Buttons(){
const [selectedButton, setSelectedButton] = React.useState();
return (
<div>
<button type="button"
className={selectedButton === "refuse" ? "active-classname" : "inactive-classname"}
onClick={() => setSelectedButton("refuse")}>Refus</button>
<button type="button"
className={selectedButton === "refuse" ? "active-classname" : "inactive-classname"}
onClick={() => setSelectedButton("refuse")}>Accepte</button>
</div>
);
}
将状态移出Button组件之外并在父组件中处理状态,Button组件可以使用prop来确定按钮的颜色,该prop可以从包含两个按钮的父组件中传递]]