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)
  }