React 中关闭浏览器的确认框

Question

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

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

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

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 对象提供的一个函数。还要检查浏览器兼容性