ブラウザのタブが反応中に閉じるときにポップアップをトリガする方法はありますか？

Question

私は、顧客関連の情報を含む登録フォームを持っています。ユーザーフォームが半分で満たされ、ユーザーがタブを閉じる場合は、「保存して終了」オプションを使用してポップアップをトリガーし、終了します。

私はいくつかのjqueryソリューションを持っています。しかし、今はすべてのブラウザで動作していません。

jQueryのサンプルコード：

'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); 
}); 

しかし、我々はreactjsでソリューションを必要としています。ブラウザアンロード用の反応ライブラリはありますか？あなたのcomponentDidMountとcomponentWillUnmountのライフサイクル関数内で「beforeunload」イベントのイベントリスナーを追加および削除することができます

おかげで、 Thangadurai

Answer 1

。

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

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

例：

... 
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; 
} 
....