如何在React中执行beforeUnload事件？

Question

我正在尝试在React中使用beforeUnload事件，在选项卡关闭或用户刷新页面之前执行操作，但该事件从未触发...我正在将此效果用于App组件。

import "./styles/global.css";
import Home from "./sections/Home";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const onBeforeUnload = (ev) => {
      ev.returnValue = "Anything you wanna put here!";
      return "Anything here as well, doesn't matter!";
    };

    window.addEventListener("beforeunload", onBeforeUnload);

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

  return (
    <div className="App">
        <Header />
        <Home />
        <Footer />
    </div>
  );
}

export default App;

- Alejandro Juarez

Answer 1

import "./styles/global.css";
import Home from "./sections/Home";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const onBeforeUnload = (ev) => {
      
      //#############     
      console.log("SOME CODE HERE");
      //#############

      ev.returnValue = "Anything you wanna put here!";
      return "Anything here as well, doesn't matter!";
    };

    window.addEventListener("beforeunload", onBeforeUnload);

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

  return (
    <div className="App">
        <Header />
        <Home />
        <Footer />
    </div>
  );
}

export default App;

- Paulo Fernando

---

谢谢回答，但还是不行...我不知道问题出在哪里。 - Alejandro Juarez

这真的很有趣，你能发布整个jsx文件吗？ - Paulo Fernando

我将代码发布在APP.jsx文件中，这样你就可以看到我有什么了... - Alejandro Juarez

也许问题在于我没有理解 beforeUnload 事件的目的，因为正如我所提到的...我想在页面重新加载之前执行一些代码。有没有不使用这个事件的方法来实现这个功能？ - Alejandro Juarez

我没有加 return 部分进行测试，但是 console.log 也被执行了。你在尝试执行什么代码？ - Paulo Fernando

Answer 2

让useEffect在任何更新时触发（通过删除空依赖项）， 然后将其放入您想要在关闭选项卡或刷新之前执行的任何代码中。

  useEffect(() => {
    window.addEventListener("beforeunload", () => {
    // any code you want
    });
  });

- Luhaib-j

Answer 3

我已经让它工作了，谢谢！...显然当重新加载页面时我没有得到弹出窗口（这是一个神秘的事情），但是返回之前的代码完美执行。

- Alejandro Juarez

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community