做网站需要好多钱,免费的logo网站,wordpress视差插件,网站设计模板 psd在 react umi 中对离开页面的行为进行自定义弹窗拦截控制。以下为可选的方案分析。
wrapper
首先#xff0c;因为项目框架是 umi#xff0c;最先想到了 umi 路由的 wrapper 装饰器#xff0c;但仔细一想又不太对#xff0c; wrapper 争对于跳转到某个特定页面的前置行为…在 react umi 中对离开页面的行为进行自定义弹窗拦截控制。以下为可选的方案分析。
wrapper
首先因为项目框架是 umi最先想到了 umi 路由的 wrapper 装饰器但仔细一想又不太对 wrapper 争对于跳转到某个特定页面的前置行为而我需要是离开某个页面行为的拦截该思路 Pass。
beforeunload
其次想到的是原生的 windows 事件beforeunload
useEffect(() { window.addEventListener(beforeunload, (event: BeforeUnloadEvent) { event.preventDefault(); event.returnValue ; })
}, [])不过这样做只能拦截到刷新行为同时还是浏览器默认的那个巨丑的弹框Pass。
history.block
最后umi 提供了 history类似 react-router v4 的 useHistory利用其 block 方法可以实现我们的需求
需求概述当提交表单后页面处于加载等待结果的过程中需要拦截用户离开页面的行为通过弹框警告其需要等待过程完成才能离开页面仅提供 确定/知道 按钮不提供继续按钮。
思路通过 history.block 监听用户离开的事件当页面处于 loading 状态阻塞页面并显示自定义弹框弹框中有一个确定按钮点击效果仅为关闭这个弹窗当页面不处于 loading先阻塞页面并保存 history.block() 的返回值用于后续的放行路由history.block的返回值是一个函数执行效果为取消路由阻塞并保存原本想要去的路由用于后续跳转然后解锁路由手动 history.push() 到刚才获取到的下一个路由伪代码
import { Button, Modal } from antd;
import { history } from umijs/max;const history useHistory();
const [loading, setLoading] useState(false); // 某容器加载
const [blockOpen, setBlockOpen] useState(false);
const [unblock, setUnblock] useStateFunction(); useEffect(() { if (loading) { history.block(({location}) {setBlockOpen(true); return false; }) } else {let next ;setUnblock(history.block(({location}) { next location.pathname;return false; })) unblock?.();history.push(next);}
}, [loading, unblock])export default function Reconc() {return(/** 上面应当有一个容器绑定loading通过某些控件控制器其加载状态 */Modal open{blockOpen} footer{Button typeprimary onClick{() setBlockOpen(false)}Button}span操作尚未完成请等待操作结束再离开页面span/Modal/)
}基本实现方案就是这样Bingo
