Как добавить или удалить className в событии в ReactJS

Я совершенно новый для Реагировать, и я немного борюсь с преобразованием своего мышления из стандартных js.

В моем реагирующем компоненте у меня есть следующий элемент:

<div className='base-state' onClick={this.handleClick}>click here</div>

Поведение, которое я ищу, - это добавить дополнительный класс при нажатии. Моя первая идея заключалась в том, чтобы попытаться добавить класс в функцию обработчика кликов, например.

handleClick : function(e) {
   <add class "click-state" here>
}

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

Может ли кто-нибудь указать мне в правильном направлении?

Ответ 1

Список классов может быть получен из состояния компонента. Например:

var Component = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

Вызов this.setState приведет к перезагрузке компонента.

Ответ 2

Вы можете использовать только ванильный JS: event.target и classList

handleClick = event => event.target.classList.add('click-state');

render() {
  return <div className="base-state" onClick={this.handleClick}>click here</div>;
}

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList