如何在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; 
} 
....