react 离开页面弹窗提示

一、使用window.addEventListener

作用：

侦听事件并处理相应的函数

 二、addEventListener(type,listener,useCapture); 参数：

target： 文档节点、document、window 或 XMLHttpRequest。 
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture ：是否使用捕捉，一般用 false 。

            例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 

文档节点： 

 

 const leaveWarning = '离开当前页后，所有未保存的数据将会丢失，是否继续？';
  const listener = (e): void => {
    e.preventDefault();
    e.returnValue = leaveWarning;
  };
  useEffect(() => {
    if (editing) {
      window.addEventListener('beforeunload', listener);
    }
    return (): void => {
      window.removeEventListener('beforeunload', listener);
    };
  }, [editing]);

三、hook方法

传统的都会去采用react-router-dom入手，不能去监听useLocation，容易造成程序紊乱，一直在调用，当中有一个Prompt，Prompt 高版本，太低的就用class的生命周期去监听router

需要在哪里就放置哪里，也可作为全局使用

Prompt介绍：

用于在离开页面之前提示用户。当您的应用程序进入应阻止用户导航的状态时（例如，表单已完成一半填充），请使用<Prompt>。

 属性：

1、message 提示用户尝试离开的消息。可以是字符串或者函数

• 当message为一个函数时，参数为要跳转的路由location对象与路由动作，如刷新页面为POP，普通跳转为PUSH
• 返回true代表允许跳转，返回字符串代表询问消息

<Prompt
  message={(location, action) => {
    if (action === 'POP') {
      console.log("Backing up...")
    }

    return location.pathname.startsWith("/app")
      ? true
      : `Are you sure you want to go to ${location.pathname}?`
  }}
/>

 message：string。设置Prompt提示内容 

import React, { useState, useRef, useEffect } from 'react';
import { Prompt } from 'react-router-dom';

const RulesDocument: React.FC = () => {

  return (
    <>
      <div>
     
        <Prompt message="您确定要离开该页面吗?" />

      </div>
    </>
  );
};

export default RulesDocument;

2、when boolean类型 设置是否启用Prompt功能。比如表单页未填写时，就不需要离开确认。

       <Prompt
         when={true}
          message={(location) => {
            if (!isPrompt) {
              return true;
            }
            confirm()【确认对话框】
            return false;
          }
          }
        />