Question

我想在点击锚点时更改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>
    );  
  }
}

为此，我需要能够引用该组件。这就是我在span类中使用ref属性的原因。

然而，当调用回调时，我收到了这个错误：

Uncaught TypeError: Cannot read property 'icon' of null

为什么ref在这里不起作用？

Answer 1

你在这里遗漏了一些东西

首先，您正在编写ES6组件类，当将ES6与React一起使用时，React不再具有this的自动绑定功能，因此您对handleCallback的调用将引用{{ 1}}将为null。

this或使用箭头函数this.handleCallback.bind(this)声明回调将解决该问题。

其次，不允许你尝试设置className的方式，React只会在重新渲染时更新树（即你所看到的），而React永远不会刷新你所做的更改＆＃39 ;在线＆＃39;返回DOM，因此您必须使用handleCallback = () => {}或this.setState()才能看到，但由于您的更改是内联的，因此它们永远不会在后续渲染中持续存在。

下面是一个非常详细的组件，用于说明如何操作

this.forceUpdate()

ref在这个reactjs组件中不起作用

1 个答案: