在ReactJS中刷新页面时添加警告。

Question

我的问题是需要用户确认是否要继续刷新页面。如果他选择“否”，则不会刷新页面。

请看一下我的开发进展：

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

- Joseph

---

你的 alertUser 是否定义为以下形式？ const alertUser = (e) => { e.preventDefault(); e.returnValue = ""; }; - Micko Magallanes

这个回答解决了你的问题吗？https://stackoverflow.com/a/64967211/8690857 请注意第二条关于浏览器支持的说明。 - Drew Reese

@DrewReese。你能完成它吗？就像有一个是/否选择。谢谢。 - Joseph

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);
}, []);

- Drew Reese

---

谢谢。顺便问一下，您如何自定义消息？ - Joseph

@Joseph，据我所知，你不能这样做...这可能是整个“...打击不受欢迎的弹出窗口...”业务的一部分。我认为通常强烈反对实现这样的催促屏幕，重点是在页面卸载之前您可能希望清理资源等，而不是打扰用户，或更具体地说，防止他们在浏览器中想要做什么。 - Drew Reese

Answer 2

我想你正在寻找这个。

https://dev.to/eons/detect-page-refresh-tab-close-and-route-change-with-react-router-v5-3pd

浏览器刷新、关闭选项卡以及前进和后退按钮都有详细的解释。

试试这个：

    useEffect(()=>{
    const unloadCallback = (event) => {      
        const e = event || window.event;
        //console.log(e)
        e.preventDefault();
        if (e) {
          e.returnValue = ''
        }
        return '';
          
    };
    
    window.addEventListener("beforeunload", unloadCallback);
    return () => {
      //cleanup function
      window.removeEventListener("beforeunload", unloadCallback);
    }
    
  },[])

- Mozi47

---

抱歉我的错误。已编辑。 - Mozi47

“try this”: 这基本上就是一年多之前发布的代码。 - trincot