关于 render函数中 onClick事件的 this

Question

在 8-3 事件与数据双向绑定这一小节中:input 为 button 上的这个 onClick 事件。正常理解下，this.changeUserInfo 中 this 应该明明指向的就是我们当前的这个 component 组件，因而可以取到我们在当前组件中定义的changeUserInfo方法，这个是我在 codePen 里改写的官方的一个小 demo.http://codepen.io/CoolHector/pen/XMaOaP

但是为什么在老师的例子中却需要绑定外部的this 才能够引用到 changeUserInfo 这个方法

Answer 1

提问者 ShineTech 2017-03-15 14:03:12

问完了问题又看了一下老师的源代码。好吧，我粗心了。我自己来回答这个问题吧。在这个 onClick事件中 仅仅是调用我们的自定义事件的话 只要 onClick={this.changeUserInfo} 就可以引用到当前组件中定义的这个方法。在这里之所以又bind了this，是因为 当我们在这里调用 this.changeUserInfo 这个函数的时候，该函数的内部 this （这里是 this.setState({...})）就不再指向该 component 实例，我们在这里 bind this 是为了能够正确的引用到 当前实例中的 setState这个方法。

• Parry #1

  非常好，感谢分享给大家。

• 榴莲痴汉 #2

  666

• 爱笑的小眼睛 #3

  我想问一下，调用 this.changeUserInfo 这个函数的时候，该函数的内部this ,为什么就不指向这个类的实例了

Answer 2

爱笑的小眼睛 2018-03-28 14:09:41

这个我真的很疑惑，在class Animal {
  constructor(name) {
  this.name = name;
  }
  getName() {
 return this.name;
 }
}
class Dog extends Animal {
 constructor(name) {
 super(name);
 }
 speak() {
 console.log(this)
 return "woof";
 }
}
var dog = new Dog("Scamp");
dog.speak()这个打印的this还是指向实例，为什么这个this.changeUserInfo 这个函数的时候，该函数的内部 this （这里是 this.setState({...})）就不再指向该 component 实例

Answer 3

一一梦一一 2017-06-27 19:53:33

是不是第一个this指向为input标签，第二个bind（this）指向为组件，还是相反啊，这两个this我不太理解？？

• 提问者 ShineTech #1

  render 方法 中 onClick = {this.changeUserInfo}; this 指向的是该 React实例，bind(this),中的的this仍是该 React实例。