reactjs घटना श्रोता जोड़ा beforeunload लेकिन उसे निकाला नहीं

Question

मैं है एक प्रतिक्रिया घटक की तरह:

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 

यहाँ घटना भरती घटक में जोड़ा जाता है। जब मैं पृष्ठ को रीफ्रेश करता हूं तो यह मुझे पृष्ठ छोड़ने के लिए पॉप अप देता है।

लेकिन जब मैं किसी अन्य पृष्ठ पर जाता हूं और इसे फिर से ताज़ा करता हूं तो वही पॉप अप दिखाता है।

मैं componentWillUnmount पर घटक से eventListener हटा रहा हूं। तो इसे क्यों हटाया नहीं जा रहा है

मैं अन्य पृष्ठों पर beoreunload ईवेंट को कैसे हटा सकता हूं?

Answer 1

removeEventListener को उसी कॉलबैक का संदर्भ प्राप्त करना चाहिए जो addEventListener में असाइन किया गया था। समारोह को दोबारा नहीं करना होगा।

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

Ori के समाधान मेरे लिए काम नहीं किया: समाधान कहीं और कॉलबैक (इस उदाहरण में onUnload) बनाने के लिए, और addEventListener और removeEventListener दोनों के संदर्भ के रूप में इसे पारित है। मैं यह काम करने के लिए यह करने के लिए किया था ... (आप डॉक्स धन्यवाद) आकर्षण की तरह

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 
    }