Question

我使用以下代码创建了 React Component 。在这个我创建选项卡并添加类并将其引用存储在全局命名空间接口中以进行进一步处理。

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"))
    );
  }
});

现在使用以下函数，将类添加到上面的组件和控制台显示错误未定义。我如何存储这个组件的refrance以便以后改变它的类。

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

Answer 1

那是因为this是对类实例的引用，而不是DOM元素。要访问DOM元素（因为React使用虚拟DOM），您需要创建一个reference，即：

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

然后，您可以通过this.refs.tabBody

访问它

但是，您不应该在课堂外传递此引用。相反，您可以在事件发生时将引用传递给handleTabClick：

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

然后你可以这样做：

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

我个人会改变状态，所以如果组件重新渲染它有正确的类。

小提琴：http://jsfiddle.net/ferahl/dpvb1h3y/

Answer 2

正如您在代码中指定的那样，使用名为'class'的状态变量来使用您的类名，其中包含值'tabBody tab activeTab'

className: this.state.class,

这就是为什么你必须使用setState（）方法来改变你的className。正如您在名为“Interface.tabBody”的全局命名空间中引用了您的类实例，可以通过调用setState（）来设置您的className，例如

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

当您想要访问React之外的类实例时，可以使用此方法。

如果你在反应中使用handleclick（），那么你可以使用以下代码

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

通过调用setState（），React将检测更改并重新呈现组件。

Answer 3

这是针对高于16.3的更新的React版本

使用

在构造函数中创建引用

<label for="file"><span class='fa fa-edit edit-icon'> </span><label>

<input type="file" id="file" style="display: none;"/>

在DOM元素中分配创建的参考

this.fooBarRef = React.createRef();

安装节点元素后引用的使用

<div className="foo" ref={this.fooBarRef}>Hello</div>

来源：React Docs

如何使用classList获取React Component引用来更改其类？

3 个答案: