关于在removeEventListener时候遇到的问题(监听函数需要bind(this))
ckinmind opened this issue · 3 comments
ckinmind commented
背景是这样的,需要监听一下scroll事件,但是监听函数需要当前组件的this环境,所以监听函数上需要bind(this), 但是这样操作后发现无法removeEventListener这个监听,代码如下
handleScroll(){
this.setStaete() //举例不一定用到setState
}
componentDidMount(){
window.addEventListener('scroll', this.handleScroll.bind(this));
}
/** 组件销毁后必要的清理*/
componentWillUnmount(){
window.removeEventListener('scroll', this.handleScroll)
}
- 如果我不在addEventListener的时候bind(this), 则监听函数里涉及到组件的thi会报错,提示找不到
- 但是如果我bind(this)则无法移除这个监听
ckinmind commented
关于bind的时候为什么会无法移除的问题:
参考资料:React事件处理函数中绑定this的bind()函数
bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
ckinmind commented
最终解决方法:
参考资料:react中 怎么在componentWillUnmount中使用removeEventListener
constructor(props) {
super(props);
this.scroll1 = this.scroll1.bind(this)
}
scroll1(){}
componentDidMount() {
window.addEventListener('scroll', this.scroll1);
}
componentWillUnmount(){
window.removeEventListener('scroll', this.scroll1);
}
在constructor统一做绑定
kodomozz commented
遇到了类似的问题,你这里用箭头函数也可以解决