document.removeEventListner pas enlever événement dans reactjs

Question

uI ont réagir composant, i utilisation crochet du cycle de vie componentDidMount pour lier mousedown événement à le document. Lorsque déclenchant l'événement de souris vers le bas je lie deux autres événements mousemove et mouseup à document également je supprime ces événements à mouseup événement.

Mon problème est quand l'événement mouseup le déclenchant supposé enlever mousemove et mouseup mais son ne fonctionne pas. Au lieu de chaque fois que je clique sur la page mouseup déclenchant plusieurs fois comme: 1, 3, 6, 10, 15 ... il se multiplie.

Lorsque componentWillUnmount également ne pas supprimer l'événement de 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

Lorsque vous bind la fonction il fera nouvelle fonction et vous ne pouvez pas référence vieux thats pourquoi this.whatever removeEventlistener ne trouvez pas votre fonction. vous pouvez résoudre ce problème en utilisant es6 classconstructor.

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