javascript - que - react logo

Detector de eventos reactjs antes de descargar agregado pero no eliminado

Question

Tengo un componente de reacción como:

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

Aquí el listador de eventos se agrega al componente. Cuando actualizo la página, aparece una ventana emergente que me pide que abandone la página.

Pero cuando voy a otra página y la actualizo de nuevo, aparece la misma ventana emergente.

Estoy eliminando el eventListener del componente en componentWillUnmount . Entonces, ¿por qué no se está eliminando?

¿Cómo puedo eliminar el evento beoreunload en otras páginas?

Answer 1

La solución de Ori no funcionó para mí. Tuve que hacer esto para que funcione ... (Gracias 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
  }

Answer 2

removeEventListener debe obtener la referencia a la misma devolución de llamada que se asignó en addEventListener . Recrear la función no servirá. La solución es crear la devolución de llamada en otro lugar ( onUnload en este ejemplo), y pasarla como referencia a addEventListener y 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