检测用户在reactjs中使用自定义弹出窗口离开页面

我想打开一个弹出窗口来警告用户，如果他们不提交表单就离开表单，他们的数据将丢失

我听说

提示符可以做到，但他们不支持我自定义弹出窗口、按钮或处理确认按钮或取消

是否有任何方法或组件可以帮助我显示弹出窗口，防止用户使用2个自定义按钮离开表单

先谢谢你
 使用反应确认警报

安装：

npm i react-confirm-alert

使用：

import { confirmAlert } from 'react-confirm-alert';
import 'styles/react-confirm-alert.css'; 

创建此自定义功能

const MyCustomConfirm = (content, onAccept, title, acceptTxt, rejectTxt) => {
acceptTxt = acceptTxt || "Yes";
rejectTxt = rejectTxt || "No";
title = title || "Message";
confirmAlert({
    title: title,
    message: <div className="react-confirm-alert-message">{content}</div>,
    buttons: [
        {
            label: acceptTxt,
            className: "btn-secondary", // your own css
            onClick: () => {
                if (onAccept) {
                    onAccept();
                }
            }
        },
        {
            label: rejectTxt,
            className: "btn-secondary", // your own css
            onClick: () => { }
        }
    ]
});

对窗体的父元素使用onBlur事件

myFunction = () =>{
     MyCustomConfirm(' Do you want to clear all ? ', function () {
                searchInput.val("");
                $(this).val("");
            });
     return false;
}


render(){
    // your parent element of form
    <form onBlur={this.myFunction()>

    </form>
}

谢谢你的回答，但我的问题是如何在用户离开表单时自动打开弹出窗口而不触发任何事件，就像提示符所做的那样。但是提示不支持自定义他们的弹出窗口。
myFunction = () =>{
     MyCustomConfirm(' Do you want to clear all ? ', function () {
                searchInput.val("");
                $(this).val("");
            });
     return false;
}


render(){
    // your parent element of form
    <form onBlur={this.myFunction()>

    </form>
}

window.addEventListener("beforeunload", function (e) {
    if (formSubmitting) {
        return undefined;
    }