在React JS中基于propmt做一些逻辑

Question

当用户想要关闭或刷新反应js中特定组件中的页面时，我想显示提示警报，并根据确认刷新或关闭窗口执行一些不同的逻辑。这是人工智能推荐的我的代码，但它对我不起作用！如何解决这个问题？

      function MyComponent() {
          useEffect(() => {
            const handleBeforeUnload = (event) => {
              event.preventDefault();
        
              const confirmationMessage = "Are you sure you want to leave this page?";
              event.returnValue = confirmationMessage;
        
              if (window.confirm(confirmationMessage)) {
                // Logic to execute when the user clicks "OK" (Yes)
                console.log("User clicked Yes");
                // Perform your desired logic here for "Yes" response
              } else {
                // Logic to execute when the user clicks "Cancel" (No)
                console.log("User clicked No");
                // Perform your desired logic here for "No" response
              }
            };
    
        window.addEventListener("beforeunload", handleBeforeUnload);
    
        return () => {
          window.removeEventListener("beforeunload", handleBeforeUnload);
        };
      }, []);

Answer 1

试试这个：

useEffect(() => {
    const handleBeforeUnload = (event) => {
     
      const confirmationMessage = "Are you sure you want to leave this page?";
      event.returnValue = confirmationMessage;
    };

    const handleUnload = () => {
     
      console.log("User clicked No");
      
    };

    window.addEventListener("beforeunload", handleBeforeUnload);

    window.addEventListener("unload", handleUnload);

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