Wie wird Popup ausgelöst, wenn die Browser-Registerkarte in reactjs geschlossen wird?

Question

Ich habe ein Anmeldeformular mit einigen kundenbezogenen Informationen. Wenn das Benutzerformular zur Hälfte ausgefüllt ist und der Benutzer die Registerkarte schließen wird, wird das Popup mit der Option zum Speichern und zum Beenden, Exit ausgelöst.

Ich habe einige Jquery-Lösung. Aber heute funktioniert es nicht in allen Browsern.

JQuery Beispielcode:

'use strict'; 
$(document).ready(function() { 

    $.fn.addEvent = function (obj, evType, fn) { 
    if (obj.addEventListener) { 
     obj.addEventListener(evType, fn, false); 
     return true; 
    } else if (obj.attachEvent) { 
     var r = obj.attachEvent('on'+evType, fn); 
     return r; 
    } else { 
     return false; 
    } 
    }; 

    $.fn.KeepOnPage = function (e) { 
    var doWarn = 1; 
    if (!e) { 
     e = window.event; 
    } 
    if (!e) { 
     return; 
    } 
    if (doWarn == 1) { // and condition whatever you want to add here 
     e.cancelBubble = true; 
     e.returnValue = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.'; 
    } 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } 
    }; 

    $.fn.addEvent(window, 'beforeunload', $.fn.KeepOnPage); 
}); 

Aber wir brauchen Lösung in reactjs. Gibt es eine Reaktivbibliothek für den Browser entladen?

Danke, Thangadurai

Answer 1

Sie können ein Ereignis-Listener für das 'beforeunload' Ereignis in Ihrem componentDidMount und componentWillUnmount Lifecycle-Funktionen hinzufügen und entfernen.

https://facebook.github.io/react/docs/component-specs.html

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Beispiel:

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

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

keepOnPage(e) { 
    var message = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.'; 
    e.returnValue = message; 
    return message; 
} 
....