React: Как переключить активный класс в группе кнопок?

Question

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

import cn from 'classnames';
import React from 'react';

class BtnGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }

  onChangeClass = () => {
    const active = this.state.active;
    this.setState({ active: !active });
  };

  render() {
    const btnClass = cn({
      'active': this.state.active,
    });
    return ( 
      <div className="btn-group" role="group">
        <button type="button" className={`btn btn-secondary left ${btnClass}`} onClick={this.onChangeClass}>Left</button>
        <button type="button" className={`btn btn-secondary right ${btnClass}`} onClick={this.onChangeClass}>Right</button>
      </div>
    );
  }
}

Answer 1

Вам необходимо определить, на какую кнопку вы нажимаете:

  onChangeClass = type => () => {
    this.setState({ active: type });
  };

, а затем в рендере:

  render() {
    return ( 
      <div className="btn-group" role="group">
        <button type="button" className={`btn btn-secondary left ${cn({
      'active': this.state.active === 'left',
    })}`} onClick={this.onChangeClass('left')}>Left</button>
        <button type="button" className={`btn btn-secondary right ${cn({
      'active': this.state.active === 'right',
    })}`} onClick={this.onChangeClass('right')}>Right</button>
      </div>
    );
  }