ckinmind/react-cnode

关于在removeEventListener时候遇到的问题(监听函数需要bind(this))

ckinmind opened this issue · 3 comments

背景是这样的,需要监听一下scroll事件,但是监听函数需要当前组件的this环境,所以监听函数上需要bind(this), 但是这样操作后发现无法removeEventListener这个监听,代码如下

 handleScroll(){
    this.setStaete()  //举例不一定用到setState
    }
 componentDidMount(){
        window.addEventListener('scroll', this.handleScroll.bind(this));
    }

    /** 组件销毁后必要的清理*/
    componentWillUnmount(){
        window.removeEventListener('scroll', this.handleScroll)
    }
  1. 如果我不在addEventListener的时候bind(this), 则监听函数里涉及到组件的thi会报错,提示找不到
  2. 但是如果我bind(this)则无法移除这个监听

关于bind的时候为什么会无法移除的问题:

参考资料:React事件处理函数中绑定this的bind()函数

bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.

最终解决方法:

参考资料: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统一做绑定

遇到了类似的问题,你这里用箭头函数也可以解决