react中的this指向问题，有点不太理解

来源：2-6 React 中数据驱动的设计思想和事件绑定（2）

qq_慕用6596887

2021-01-19 22:52:07

handleInputChange(e) {
    console.log(this)
}

在类的构造函数中的this指向的是类的实例对象，而且类的方法是添加在类的prototype上的。那handleinputchange方法的函数体内的this应该是指向实例对象的。我理解的没错吧？

onChange={this.handleInputChange}

另外老师说render()函数的this指向组件，这里指的组件是TodoList类的实例对象吗？而且render（）也算类的一个方法了，那么

onChange={this.handleInputChange}

上面这句也是写在render（）函数体里的。那为什么这句里的this指向的是undefined？它和下面es6中的console.log(this)里的this有什么区别？

el.onchange = function(){
    console.log(this)
}（这里的this我知道是指向el）

写回答

1回答

好帮手慕慕子

2021-01-20

已采纳

同学你好，对于你的问题解答如下：

1、如下图所示划线部分的理解有误差

类中的普通函数中，this指向函数的调用者。老师举一个简单的例子帮助同学更好的理解，示例：

2、是的，render函数中this指向TodoList类的实例对象。

3、onChange={this.handleInputChange}这样绑定事件时，会导致this丢失（指向undefined），这个问题是react中的一个固定现象，可以理解为react语法规定就是这样的，我们需要记住，在绑定事件时，记得改变this指向

3、el.onchange = function(){console.log(this)}这种方式，内部的this确实指向el

与react中绑定事件的写法看起来差不多，但是因为react事件处理方式与js中不一样，所以事件函数内部的this指向不同，这里涉及到底层原理，目前阶段，同学了解下即可。

祝学习愉快~

0 学习 · 15276 问题

相似问题

回答 1

回答 1

回答 1

回答 3

回答 1