浏览器选项卡在 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 中的解决方案。是否有用于浏览器卸载的 React 库？

谢谢，坦加杜赖

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