reactjs detektor zdarzeń beforeunload dodany, ale nie są usuwane

Question

I składnik reakcji, takich jak:

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 

tutaj zdarzenia Lister jest dodawana do podzespołu. Po odświeżeniu strony pojawia się wyskakujące okienko z prośbą o opuszczenie strony.

Ale kiedy przejdę na inną stronę i odświeżę ją ponownie, wyświetli się to samo okno.

Usuwam eventListener ze składnika na componentWillUnmount. Dlaczego więc nie jest on usuwany?

Jak usunąć zdarzenie beoreunload na innych stronach?

Answer 1

removeEventListener powinien uzyskać odwołanie do tego samego wywołania zwrotnego, które zostało przypisane w addEventListener. Odtwarzanie funkcji nie będzie możliwe. Rozwiązaniem jest stworzenie zwrotnego gdzie indziej (onUnload w tym przykładzie), i przekazać ją jako punkt odniesienia zarówno addEventListener i 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 

Answer 2

rozwiązanie Orionis nie działa dla mnie. Musiałem to zrobić, aby to działało ... (Dziękuję 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 
    }