如何解决History.block 方法不适用于 swal
如果用户不保存表单,我会尽量避免用户转到上一页。 我查看了文档,找不到有关此实现或错误的任何信息。任何帮助表示赞赏。
当前行为: 当用户编辑表单并点击后退按钮时,导航发生在前一页,然后 swal 被触发。
历史。阻止文档:-
// Block navigation and register a callback that
// fires when a navigation attempt is blocked.
let unblock = history.block(tx => {
// Navigation was blocked! Let's show a confirmation dialog
// so the user can decide if they actually want to navigate
// away and discard changes they've made in the current page.
let url = tx.location.pathname;
if (window.confirm(`Are you sure you want to go to ${url}?`)) {
// Unblock the navigation.
unblock();
// Retry the transition.
tx.retry();
}
})
代码
useEffect(() => {
const unblock = history.block(() => {
//All saved is a custom hook for the input form.
if (!allSaved) {
Swal.fire({
title: "Are you sure?",text: "You have not saved the changes. Are you sure you want to exit? You can come back and edit this report!!!",icon: "warning",showCancelButton: true,confirmButtonText: "Ok",cancelButtonText: "Cancel",allowOutsideClick: false,}).then((result) => {
if (result.value) {
return true;
} if (result.dismiss === Swal.DismissReason.cancel) {
return false;
}
});
}
return true;
});
return () => {
unblock();
};
},[allSaved]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。