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