javascript - 在 React 中关闭浏览器的确认框

Question

我有一个用例，当用户关闭我的 React 应用程序中的浏览器选项卡时，我想呈现一个确认框。

我有一个队列，其中包含要向后端服务器发出的请求。如果队列不为空并且用户关闭浏览器选项卡，我想呈现带有一些自定义消息的确认对话框。

是否有任何我应该遵循的推荐库或工作流程来实现这一目标？

Answer 1

您可以使用 window.onbeforeunload函数，在关闭浏览器窗口之前显示弹出窗口。

例如:在您的组件的componentDidMount 中，编写以下代码:

window.onbeforeunload = function(e) {
  if( //queue not empty ) {
    return;
  }
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

这与 React 没有任何关系，而只是 window 对象提供的一个功能。还要检查 browser compatibility