javascript - document.removeEventListner 不删除 reactjs 中的事件

Question

u我有 React 组件，我使用 componentDidMount 生命周期 Hook 将 mousedown 事件绑定(bind)到 document。当鼠标按下事件触发时，我将另外两个事件 mousemove 和 mouseup 绑定(bind)到 document 并且我在 mouseup 删除了这些事件事件。

我的问题是当 mouseup 事件触发时它应该删除 mousemove 和 mouseup 但它不起作用。相反，每次我点击页面 mouseup 时都会触发多次，例如:1、3、6、10、15...它正在成倍增加。

当 componentWillUnmount 也没有从 document 中删除事件时。

import React, { Component } from 'react'

class SandBox extends Component{
    componentDidMount(){
        document.addEventListener('mousedown', this.mouseDown.bind(this))
    }

    //mouseDown
    mouseDown(){
        document.addEventListener('mouseup', this.mouseUp.bind(this))
        document.addEventListener('mousemove', this.mouseMove.bind(this))
    }

    //mouseUp
    mouseUp(){
        // this is not removing the events from document
        document.removeEventListener('mouseup', this.mouseUp, false)
        document.removeEventListener('mousemove', this.mouseMove, false)
        // this triggers 1,3,6,10,15 times
        console.log('mose up')
    }

    moseMove(){
        // mosemoveCodes
    }

}

Answer 1

当您bind 函数时，它会生成新函数，您不能引用旧的 this。无论如何，removeEventlistener 无法找到您的函数。您可以使用 es6 class constructor 解决此问题。

class YourComponent extends Component {
   constructor(props){
     super(props)
     //bind and reference your methods here
     this.mouseDown = this.mouseDown.bind(this)
     this.mouseUp = this.mouseUp.bind(this)
     this.mouseMove = this.mouseMove.bind(this)
     // now its pointing corectcly
   }
   // lifecycle
   componentDidMount(){
     document.addEventListener('mousedown', this.mouseDown.bind(this))
   }
   //mouseDown
   mouseDown(){
     document.addEventListener('mouseup', this.mouseUp)
     document.addEventListener('mousemove', this.mouseMove)
   }

   //mouseUp
   mouseUp(){
     // this is will work
     document.removeEventListener('mouseup', this.mouseUp, false)
     document.removeEventListener('mousemove', this.mouseMove, false)

     console.log('mouse up')
   }
    // unmount
   componentWillUnmount(){
     // this is will work
     document.removeEventListener('mousedown', this.mouseDown, false)
   }
}