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

[ckinmind]

背景是这样的，需要监听一下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)则无法移除这个监听

[ckinmind]

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

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

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

[ckinmind]

最终解决方法：

参考资料：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]

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