React 中关闭浏览器的确认框

Question

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

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

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

Answer 1

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

例如：在componentDidMount的 componentDidMount 内，编写以下代码：

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

这与 React 没有任何关系，而只是 window 对象提供的一个函数。 还要检查浏览器兼容性

Answer 2

import { useEffect, useState } from 'react';


/**
 * Confirm browser exit.
 *
 * @param defaultEnabled Start as enabled?
 * @param message Custom message (old browsers only).
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
 */
export const useConfirmBrowserExit = (
  defaultEnabled = true,
  message = 'Confirm leave page'
) => {
  const [msg, setMsg] = useState<string>(message);
  const [enabled, setEnabled] = useState<boolean>(defaultEnabled);

  useEffect(() => {
    function listener(e: BeforeUnloadEvent) {
      if (enabled) {
        e.preventDefault();
        e.returnValue = msg;
        return msg;
      }
    }

    window.addEventListener('beforeunload', listener);

    return () => {
      window.removeEventListener('beforeunload', listener);
    };
  }, [msg, enabled]);

  return {
    enable(): void {
      setEnabled(true);
    },
    disable(): void {
      setEnabled(false);
    },
    setMessage(newMessage: string): void {
      setMsg(newMessage);
    },
    getMessage(): string {
      return msg;
    },
    setEnabled(status: boolean): void {
      setEnabled(status);
    },
    getEnabled(): boolean {
      return enabled;
    },
  };
};

笔记

来自https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

对自定义消息的支持已被删除。