如何解决如何用react hooks设置离开警告?
我正在制作一个需要显示进度的应用程序,如果您回弹,将会丢失该信息。
我确实使用过useEffect钩子:
useEffect(() => {
return () => {
showWarning();
}
},[])
我可以使用哪个功能停止后退动作,以便显示警告并确认?
解决方法
如果您使用的是react-router
,则可以使用Prompt
来处理这种行为。您在此处有更多信息:https://reactrouter.com/core/api/Prompt
“我可以使用哪个函数来停止此后退操作”,如果您的意思是要停止浏览器完成其操作,那么那不是设计应用程序的方式,带有return语句的useEffect用于清理工作并不是用于安装其他组件或显示消息
您可以改为使用onbeforeunload
事件并清理应用程序unmount
上的处理程序,但是它将向您显示一个弹出窗口,其中包含无法更改的默认消息
useEffect(() => {
function showWarning() {
return '';
}
window.addEventListener('beforeunload',showWarning);
return () => {
window.removeEventListener('beforeunload',showWarning);
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。