react 类组件的 this 指向

【引言】react 与原生的js很相近，其中许多问题也是js原生会碰到的问题，下面是一个this指向问题
【问题】React的类组件由React对其进行实例化，所以在React类组件内部的this指向都是当前组件的实例化对象。但是，在做事件处理的时候，类内部自定义的普通函数的this却又指向了undefined。

测试两个地方的调用有什么不同：

1. 直接通过this调用
2. 先绑定到 onClick 事件上然后再调用

import React from 'react'
export default class Bs extends React.Component {
// 首先在原型上定义了一个方法
handleClick(){
console.log(this);
}
render() {
return (
<div>
{this.handleClick() }
// Bs
<button
onClick={this.handleClick}
// undefined
>点击</button>
</div>
)
}
}

可见：

1. 直接通过this调用 ，返回 Bs实例
2. 先绑定到 onClick 事件上然后再调用 ， 返回undefined

知识讲解：

1. 原生js：默认的react中this指向当前实例对象，但是当将其中的方法赋值给一个‘变量’时，相当于onClick=function(){console.log(this)},此时this指向发生变化，指向window对象
2. 但是在react中略有不同，凡是指向window对象的，一律转为undefined
   1. react的原理是：react开启了 js严格模式，而严格模式只有 匿名函数受影响，原本指向window的匿名函数，如今只能指向undefined

解决方案：
4. 绑定到方法的时候包一层箭头函数 this.handleClick.bind(this)
5. 通过bind改变this指向 handleClick = () => {}

如下：

import React from 'react'
export default class Bs extends React.Component {
handleClick(){
console.log(this);
}
render() {
return (
<div>
<button
// onClick={()=>{this.handleClick()}}
// onClick={this.handleClick.bind(this)}
>点击</button>
</div>
)
}
}

最后

以上就是无奈方盒为你收集整理的react 类组件的 this 指向react 类组件的 this 指向的全部内容，希望文章能够帮你解决react 类组件的 this 指向react 类组件的 this 指向所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。