Как добавлять класс при клике на кнопку?

Question

[Ольга]

Необходимо, чтобы при клике на кнопку к контейнеру добавлялся новый класс.

Answer 1

[Олег Гамега]

в state ложите переменную по клику на кнопку ее меняете, в рендере компонента className делаете в зависимости от переменной в state

Answer 2

[davidnum95]

Хранить в стейте компонента флаг и на основе этого флага применять стили. К примеру:

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

class SomeComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      show: false,
    };
  }

  onClick() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    return <div onClick={this.onClick} className={classnames('some-class', { 'change-class': show })} />;
  }
}

export default SomeComponent;

Comments

[Smuzzzzzi]

Подскажите, а как сделать чтоб класс отменился при нажатии в любую точку экрана, а не именно на эту же кнопку?