Javascript 在按钮之间切换

如何在按钮之间进行动态切换？例如，如果一个按钮处于活动状态，则其余按钮不处于活动状态。例如：

构造函数（道具）{
超级（道具）
此.state={
活动：错误，
注：错
}
}
检查活动=（）=>{
这是我的国家({
主动：对，
注：错
})
};
checkNotactive=（）=>{
这是我的国家({
活动：错误，
注：对
})
};您可以使用索引来标记活动按钮，而不是布尔值

例如：

然后，当使用循环创建按钮时，您可以检查

if (index === this.state.activeButtonIndex) { do something }

您需要有一个基于按钮的类型属性。例如，如果你需要每天、每周、每月制作3个按钮，那么你可以有这样的东西

return (
  <div style={style.buttonContainer}>
    <div className={this.props.active === "daily" ? "activeButton" : ""}>
      <Button color="primary" onClick={this.handleClick("daily")}>
        Daily
      </Button>
    </div>
    <div className={this.props.active === "weekly" ? "activeButton" : ""}>
      <Button color="primary" onClick={this.handleClick("weekly")}>
        Weekly
      </Button>
    </div>
    <div className={this.props.active === "monthly" ? "activeButton" : ""}>
      <Button color="primary" onClick={this.handleClick("monthly")}>
        Monthly
      </Button>
    </div>
  </div>
);

返回(
每日的
周报
月刊
);

我在父级的state
active
上有一个属性，并基于此动态切换
 在状态下存储活动按钮的索引如何？在状态下，按住活动按钮的
名称
，然后检查是否禁用，如
，或者，如果从数组中渲染按钮，则可以存储活动按钮的索引
return (
  <div style={style.buttonContainer}>
    <div className={this.props.active === "daily" ? "activeButton" : ""}>
      <Button color="primary" onClick={this.handleClick("daily")}>
        Daily
      </Button>
    </div>
    <div className={this.props.active === "weekly" ? "activeButton" : ""}>
      <Button color="primary" onClick={this.handleClick("weekly")}>
        Weekly
      </Button>
    </div>
    <div className={this.props.active === "monthly" ? "activeButton" : ""}>
      <Button color="primary" onClick={this.handleClick("monthly")}>
        Monthly
      </Button>
    </div>
  </div>
);