前言: 本系列(R1)文章目前适用于初学者查看
目标:了解事件处理程序中this指向undefined且知道原因
在react官网中也对事件处理中this指向问题有说明:(如图)
内容:
- 事件处理程序中this是指向undefined
- render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题。
原因:
- 事件处理程序中的函数式函数调用模式,在js严格模式下(模块式),this指向undefined
- render函数是被组件实例调用的,因此其中的this指向的是当前组件。
解决:(重点)
-
render中使用箭头函数(不推荐)
2.使用bind
bind会返回一个函数的实例 (新的函数)。注意不能用call apply,因为call apply会直接调用函数。
好处:1.事件对象不受影响 2.代码结构美观
3.将注册事件改写为箭头函数-推荐!!
因为箭头函数内部没有this,指向的是上一级的this