如何在reactjs中關閉瀏覽器選項卡時觸發彈出窗口？

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解決方案。瀏覽器是否有任何反應庫卸載？

感謝， Thangadurai

Answer 1

您可以添加和刪除事件偵聽器爲您componentDidMount和componentWillUnmount生命週期功能中的「beforeunload」事件。

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