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

Question

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

9

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

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

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

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

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

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

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

Finglish 26 фев. 2015, в 01:43

Источник

Теги:

javascript

reactjs

node.js

2 ответа

Ещё вопросы

Felix Kling · Answer 1 · 2015-02-26T01-33-00.000Z

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

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 приведет к перезагрузке компонента.

Вы также можете использовать classSet() : facebook.github.io/react/docs/class-name-manipulation.html
У меня есть список элементов, когда я реализую это в своем решении, класс меняется для всех элементов в списке. Я хочу, чтобы он изменил только один элемент из списка, один элемент, на котором я щелкнул. Любое решение этого?
Для Temp O'rary person: Для списка элементов, вероятно, вы не связали обработчик кликов. Или в элементе с чем-то вроде onClick={() => this.handleClick} или в вашем конструкторе: this.handleClick = this.handleClick.bind(this); и в вашем handleClick задайте состояние для конкретного элемента (например, this.setState({someName}) ), а не просто clicked: true

Adrian Bienias · Answer 2 · 2018-02-09T15-28-00.000Z

Добавить атрибут ref в div:

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

Затем в методе handleClick получите элемент по ref и используйте свойство JavaScriptListList:

handleClick = () => {
  const element = this.refs.element;
  element.classList.add('click-state');
}

https://reactjs.org/docs/refs-and-the-dom.html

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