如果在 ReactJS 中关闭或刷新页面，则显示警告

Question

我的问题是我需要用户确认是否要继续关闭或刷新页面。如果他按下No，它不会关闭也不会刷新页面。

请看一下我到目前为止的代码：

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);

Answer 1

如果您想在离开页面之前显示某种确认信息，请遵循beforeunload 事件指南

根据规范，要显示确认对话框，事件处理程序应该对事件调用 PreventDefault()。

但请注意，并非所有浏览器都支持此方法，有些浏览器需要事件处理程序来实现以下两种旧方法之一：

• 将字符串分配给事件的 returnValue 属性
• 从事件处理程序返回一个字符串。

为了对抗不需要的弹出窗口，beforeunload除非已与页面交互，否则浏览器可能不会显示在事件处理程序中创建的提示，或者甚至可能根本不显示它们。

HTML 规范规定，在此事件期间对window.alert()、 window.confirm()和方法的调用可能会被忽略。有关详细信息，window.prompt()请参阅HTML 规范。

我刚刚在 chrome 和 safari 中测试了它，它有效。我没有 Windows 盒子，但这应该涵盖大多数情况。

useEffect(() => {
  const unloadCallback = (event) => {
    event.preventDefault();
    event.returnValue = "";
    return "";
  };

  window.addEventListener("beforeunload", unloadCallback);
  return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);