Question

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

     constructor(props) {
    super(props)

    this.state = {
      active: false,
      notactive: false
    }
  }

  checkActive = () => {
    this.setState({
      active: true,
      notactive: false
    })
  };

  checkNotactive = () => {
    this.setState({
      active: false,
      notactive: true
    })
  };

但是我想让它充满活力。我的意思是，当我有10个按钮时，我不会将每个状态分开。如果我添加另一个按钮，它将起作用。就像单选按钮一样。

Answer 1

您可以使用索引来标记活动按钮，而不是布尔值。

例如：

this.state = {
    activeButtonIndex: null
}

然后在使用循环创建按钮时可以检查

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

Answer 2

您需要基于按钮具有type属性。例如，如果您需要每天，每周，每月三个按钮，那么您可以使用类似的方法。

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>
);

我在父级状态active上有一个属性，基于此，我将动态切换。

在按钮之间切换

2 个答案: