Добавить и удалить класс на кнопках реагирования

Question

Я пытаюсь создать две кнопки, которые будут менять свой класс при нажатии. Поэтому, когда нажата первая кнопка, она добавит в нее «активный» класс и удалит «активный» класс для кнопки sibiling.

Теперь я добился определенного прогресса, но не работает то, что я хочу добавить активный класс только при нажатии на элемент. По умолчанию у кнопок не должно быть классов. Когда пользователь нажимает на первую кнопку, к ней добавляется активный класс, затем, если пользователь нажимает на кнопку два, он удаляет активный класс из кнопки 1 и добавляет его ко второй кнопке. Еще одна вещь, которая не работает должным образом, это то, что когда я нажимаю на уже нажатую и уже активную кнопку, это меняет класс и состояние. Поэтому должно быть так, что когда я нажимаю на уже выбранную кнопку, она не должна ничего делать, кнопка с активным состоянием должна оставаться активной. Он должен работать как функция jQuery toggleClass.

Мой код реакции:

import React, { Component } from "react";
import css from "./styles.css";

export default class TypeButtons extends Component {
  constructor(props) {
    super(props);
    this.state = { isActive: true };
  }

  ToggleClass = (e) => {
    this.setState({ isActive: !this.state.isActive })
  }

  render() {
    return (
      <div className={css.buttonsContainer}>
        <button onClick={this.handleClick} className={( !this.state.isActive ? '' : 'active' )} onClick={this.ToggleClass}>
          Button 1
        </button>
        <button onClick={this.handleClick} className={( this.state.isActive ? '' : 'active' )} onClick={this.ToggleClass}>
          Button 2
        </button>
      </div>
    );
  }
}

CSS:

.active {
  background: green;
}

Я создал пример Codesandbox: https://codesandbox.io/s/vigorous-pare-3zo0s

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

Любая помощь будет много значить!

Answer 1

class TypeButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: "0" };
    this.buttons = [
        { id: "1", title: "Button 1" },
        { id: "2", title: "Button 2" }
    ];
  }

  handleClick = e => {        
    this.setState({ active: e.target.dataset.id });
  };

  render() {
    return (
        <div>
            {this.state.active}
            {this.buttons.map(({ id, title }) => {
                return (
                    <button
                        key={id}
                        data-id={id}
                        onClick={this.handleClick}
                        className={this.state.active === id ? "active" : ""}
                    >
                        {title}
                    </button>
                );
            })}
        </div>
    );
  }
 }

Answer 2

https://codesandbox.io/s/naughty-allen-vrj3r

Здесь я отредактировал ваши коды и ящики. По сути, я храню в этом состоянии ключ, который идентифицирует активную кнопку. Это null по умолчанию, так как это то, что вы хотели.

Я назначил целые числа для каждой кнопки, но это может быть все, что вы хотите. Вы также можете оставить целые числа и добавить свои кнопки с помощью .map (), чтобы иметь динамическое число кнопок c для примеров (см. Ответ Константина).