Переключение между кнопками

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

Вам нужно иметь свойство type, основанное на ваших кнопках.Например, если вам нужно делать 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>
);

У меня есть свойство для состояния родителя active, и на основании этого я буду динамически переключаться.

Answer 2

Вместо логического значения вы можете использовать индекс для пометки активной кнопки.

Например:

this.state = {
    activeButtonIndex: null
}

, тогда при создании кнопок с помощью цикла вы можете отметить

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