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对象提供的函数有关。另请检查browser compatibility

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

<块引用>

已取消对自定义消息的支持。

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

2 个答案:

注意