如果在 ReactJS 中刷新页面，则发出警告

Question

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

请看看我到目前为止的发展：-

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

Answer 1

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

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

但请注意，并非所有浏览器都支持此方法，有些浏览器 而是要求事件处理程序实现两个遗留的之一 方法：

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

为了防止不需要的弹出窗口，浏览器可能不会显示创建的提示 在beforeunload 事件处理程序中，除非页面已被交互 有，甚至可能根本不显示。

HTML 规范声明调用window.alert()， window.confirm() 和 window.prompt() 方法可能会被忽略 这个事件。有关详细信息，请参阅HTML specification。

我刚刚在 chrome 和 safari 中对此进行了测试，它可以工作。我没有 windows 框，但这应该涵盖大多数情况。

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

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