初学React—组件点击事件this问题及解决办法

394 阅读1分钟
首先来看一段代码,我将 h1 绑定了一个点击事件,调用this.changeWeather 方法,打印this.state.isHot的值

image.png

当我点击h1的时候,控制台出现了以下错误image.png

state undefined 于是我又打印了this 结果也是 undefined 为什么会出现这种情况呢? 我们先来看一段代码

我们首先新建一个Person类, 并在类的study()方法中打印 this
1》实例化Person类 并通过p1调用study()
2》将const x = p1.study 并调用 x() image.png image.png

我们可以看到 通过p1调用study方法时this指向Person实例 但调用x()时却得到的的是 undefined 你可以这样理解
image.png

function(){} 这个方法本来只有 xxx.study() 可以调用,并且只有通过类的实例对象调用时,function(){} 里的this才指向 Person

但是 当 x 也指向这个 function(){} 时,调用x() 属于直接调用,此时 function(){} 里面的this会指向Windows,在严格模式下显示为 undefined`

同理 你将 onclick={this.changeWeather},当你点击后 onclick 找到了 changeWeather()方法,此时属于直接调用,所以里面的 this 指向的不是 Weacher 而是Windows,又因为类里面的方法会开启局部严格模式,所以会出现state undefined

解决办法
通常就是让 onclick 接收的changeWeather()方法 内部this指向 Weather

1 通过箭头函数将function(){} 里的this绑定到类
2 在类的constructor内 this.changeWeather = this.changeWeather().bind(this); this指向Weather的changeWeather() 方法

image.png 这样就可以了