web-dev-qa-db-fra.com

l'écouteur d'événement reactjs beforeunload ajouté mais non supprimé

J'ai un composant de réaction comme:

import React, { PropTypes, Component } from 'react'


class MyComponent extends Component {

    componentDidMount() {
       window.addEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    render() {

        return (
            <div>
                Some content
            </div>
        )
    }

}

export default MyComponent

Ici, le lister d'événements est ajouté au composant. Lorsque je rafraîchit la page, une fenêtre contextuelle me demande de quitter la page. 

Mais lorsque je vais sur une autre page et que je l'actualise à nouveau, la même fenêtre contextuelle s'affiche.

Je supprime la eventListener du composant sur componentWillUnmount. Alors pourquoi n'est-il pas supprimé?

Comment puis-je supprimer l'événement beforeunload sur d'autres pages?

javascriptreactjsaddeventlistenerevent-listener
24
gamer

removeEventListener devrait obtenir la référence au même rappel que celui attribué dans addEventListener. Recréer la fonction ne fera pas l'affaire. La solution consiste à créer le rappel ailleurs (onUnload dans cet exemple) et à le transmettre comme référence à addEventListener et removeEventListener:

import React, { PropTypes, Component } from 'react'


class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.onUnload = this.onUnload.bind(this); // if you need to bind callback to this
    }

    onUnload(event) { // the method that will be used for both add and remove event
        console.log("hellooww")
        event.returnValue = "Hellooww"
    }

    componentDidMount() {
       window.addEventListener("beforeunload", this.onUnload)
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", this.onUnload)
    }

    render() {

        return (
            <div>
                Some content
            </div>
        )
    }

}

export default MyComponent
40
Ori Drori

La solution d'Ori n'a pas fonctionné pour moi. Je devais le faire pour que ça marche ... (Merci docs)

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleLeavePage);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleLeavePage);
  }

  handleLeavePage(e) {
    const confirmationMessage = '';
    e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
    return confirmationMessage;              // Gecko, WebKit, Chrome <34
  }
0
Michael