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

【问题标题】：Prevent multiple button color activation in ReactJS防止在 ReactJS 中激活多个按钮颜色
【发布时间】：2020-01-17 17:45:47
【问题描述】：

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

【问题讨论】：

而不是使用state 公开prop 用于该用途。并让父控件控制哪个是活动的。

标签： javascript reactjs semantic-ui

【解决方案1】：

将状态提升到Button组件外并在父组件中处理状态，Button组件可以使用prop来判断按钮的颜色，prop可以从父组件传入，包含两个按钮

这可能会有所帮助 - https://codesandbox.io/s/red-green-button-5t7ds

【讨论】：

【解决方案2】：

你不需要一个类组件。只需为您的本地状态使用 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>
   ); 
}

【讨论】：