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

Question

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

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

是否有任何推荐的库或工作流程可供我使用以实现此目的？

- Deepanshu Arora

---

尝试使用这个库：https://github.com/igorprado/react-notification-system - Albert Olivé Corbella

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对象提供的函数。同时请查看浏览器兼容性。

- Dane

---

嗨，Dane， 我在https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload上看到了，支持自定义消息已被删除。我正在寻找像react-router中的NavigationPrompt这样的组件，它是可用的，我可以使用。 - Deepanshu Arora

是的，我也看到了。但似乎你可以从函数内部调用任何函数。因此，你可以在这个函数中包含例如：yourModal.show()。缺点是窗口弹出仍然可见。 - Dane

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起，不再支持自定义消息。

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

- Eduardo Cuomo

---

不错的解决方案，但由于现代浏览器不再支持此功能，因此在Mozilla中无法使用。 - Leonidas