防止在ReactJS中激活多个按钮颜色

Question

我有两个带有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')}
            />
            </>
        )
    }