时间戳

首页 > 解决方案 > 在reactjs中使用自定义弹出窗口检测用户离开页面

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

问题描述

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

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

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

先感谢您。

标签： reactjsreact-reduxreact-router

解决方案

使用反应确认警报

安装：

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: () => { }
        }
    ]
});

}

现在你可以在任何地方调用它。例子 ：

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

推荐阅读