Reactjs ref在此组件中不起作用

每当单击锚点时，我想更改

span

元素的css类

我将在onclick回调中修改css类

class Button extends Component {
  handleCallback() {
    this.icon.className = this.icon.className + ' wiggle'
  }
  render() {
    return (
      <div>
        <span className='highlight'>{this.props.summary}</span>
        <a  
          className='link'
          onClick={this.handleCallback}
        >   
          <span ref={(c) => this.icon = c} className='icon-up'></span>
        </a>

      </div>
    );  
  }
}

---

为什么

ref

在这里不起作用？

这里缺少一些东西

首先，您正在编写一个ES6组件类，当ES6与React一起使用时，React不再具有

this

的自动绑定功能，您可以调用

handleCallback

引用一个将为空的

this

this.handleCallback.bind（this）

或使用箭头函数声明回调

handleCallback=（）=>{}

将解决该问题

其次，不允许您尝试设置类名的方式，React在重新渲染时只更新树（即您看到的），React永远不会将您“内联”所做的更改刷新回DOM，因此您必须利用

this.setState（）

或

this.forceUpdate（）

才能看到，但是，由于您的更改是内联的，因此它们将永远不会保留在后续渲染中

下面是一个非常详细的组件来说明如何做到这一点

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      shouldWiggle: false
    };
  }
  handleCallback() {
    this.setState({shouldWiggle: !this.state.shouldWiggle});
  }
  render() {
    let cls = this.state.shouldWiggle ? 'icon-up wiggle': 'icon-up';
    return (
      <div>
        <span className='highlight'>{this.props.summary}</span>
        <a  
          className='link'
          onClick={this.handleCallback.bind(this)}
        >   
          <span ref={(c) => this.icon = c} className={cls}>ad</span>
        </a>

      </div>
    );  
  }
}

class按钮扩展React.Component{
构造函数（）{
超级（）；
此.state={
应该摇摆：错
};
}
handleCallback（）{
this.setState（{shouldWiggle:！this.state.shouldWiggle}）；
}
render（）{
让cls=this.state.shouldwigle？'icon up wiggle'：'icon up'；
返回(
{this.props.summary}
this.icon=c}className={cls}>ad
);  
}
}

this.handleCallback.bind（this）的荣誉。我花了一天的时间来搞清楚这一点，直到我来到这里。

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      shouldWiggle: false
    };
  }
  handleCallback() {
    this.setState({shouldWiggle: !this.state.shouldWiggle});
  }
  render() {
    let cls = this.state.shouldWiggle ? 'icon-up wiggle': 'icon-up';
    return (
      <div>
        <span className='highlight'>{this.props.summary}</span>
        <a  
          className='link'
          onClick={this.handleCallback.bind(this)}
        >   
          <span ref={(c) => this.icon = c} className={cls}>ad</span>
        </a>

      </div>
    );  
  }
}