Как получить ссылку на компонент React для изменения его класса с помощью classList?

у меня создано!--3-->Компонент React используя следующий код. В этом я создаю вкладку и добавляю класс и сохраняю его ссылку в интерфейсе глобального пространства имен для дальнейшей обработки. 

var TabBody = React.createClass({
  getInitialState: function() {
    return {
      class: 'tabBody tab activeTab'
    }
  },
  render: function() {
    Interfaces.tabBody = this;
    tabSelectionInfo.tabBody = this;
    return (
      React.createElement('div', {
          className: this.state.class,
          onClick: handleTabClick
        },
        React.createElement('span', {}, "Body"))
    );
  }
});

теперь, используя следующую функцию, чтобы добавить класс к вышеуказанному компоненту, и консоль показывает ошибку undefined. как я храню рефранс этого компонента, чтобы изменить его класс позже.

handleTabClick = function() {
  Interfaces.tabBody.classList.add('tabPreviewComplete');
}
6
facebook javascript reactjs

2 ответов

как вы указали в своем коде, что ваше имя класса используется с использованием переменной состояния с именем "class", содержащей значение "tabBody tab activeTab"

className: this.state.class,

вот почему вы должны использовать метод setState () для изменения имени класса. А у вас есть ссылка на экземпляр класса в глобальном пространстве имен с именем 'интерфейс.tabBody' , который можно использовать для установки имени класса, вызвав setState () e.g

Interface.tabBody.setState({class: 'tabBody tab activeTab disabled'});

этот метод используется, когда вы хотите получить доступ к классу экземпляр вне React.

Если вы используете handleclick () в своем react, вы можете использовать следующий код

handleTabClick = function() {
  this.setState({class: 'tabBody tab activeTab disabled'});
}

вызывая setState (), React обнаружит изменения и повторно отобразит компонент.

1

потому что this является ссылкой на экземпляр класса, а не на элемент DOM. Для доступа к элементам DOM (поскольку React использует виртуальный DOM) вам нужно создать ссылка, Я.е:

React.createElement('div', {
  ref: 'tabBody'

затем вы можете получить доступ к нему через this.refs.tabBody

однако вы не должны передавать эту ссылку за пределы класса. Вместо этого вы можете передать ссылку на handleTabClick когда событие происходит:

React.createElement('div', {
  ref: 'tabBody'
  onClick: e => this.props.handleTabClick(e, this.refs.tabBody)

затем вы можете do:

handleTabClick = function(e, tabBody) {
    tabBody.classList.add('tabPreviewComplete');
}

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

Скрипка:http://jsfiddle.net/ferahl/dpvb1h3y/

5