react取消监听scroll事件

react取消监听scroll事件

 

如果要移除事件addEventListener的执行函数必须使用外部函数而不能直接使用匿名函数

错误写法：

 // 这样写是移除不了滚动事件的
 componentDidMount() {
    // 添加滚动监听
    window.addEventListener('scroll', ()=>{
      console.log("滚动距离：",window.scrollY)
    });
  }
  // 组件将要卸载，取消监听window滚动事件
  componentWillUnmount(){
    window.removeEventListener('scroll', ()=>{
      console.log("滚动距离：",window.scrollY)
    });
  }

正确写法：

 componentDidMount() {
    // 添加滚动监听
    window.addEventListener('scroll', this.scroll);
  }
  // 组件将要卸载，取消监听window滚动事件
  componentWillUnmount(){
    window.removeEventListener('scroll', this.scroll);

  }

  scroll1 = ()=>{
    console.log("滚动距离：",window.scrollY)
  }

 

posted @ 2019-02-22 10:19 青云码上 阅读( ...) 评论( ...) 编辑 收藏