如何设置带有反作用挂钩的离开警告

Question

我正在制作一个应用程序，该应用程序需要显示如果您反击，进度将丢失。

我确实使用了useEffect挂钩：

useEffect(() => {
return () => {
showWarning();
}
}, [])

我可以使用哪个功能来停止此后退操作，以便显示警告并进行确认？

Answer 1

如果您使用的是react-router，那么您有Prompt来处理这种行为。您在这里有更多信息：https://reactrouter.com/core/api/Prompt

Answer 2

"我可以使用哪个功能来停止这种后退动作"；如果你的意思是你想阻止浏览器完成其操作，那么这不是设计应用程序的方法，带有返回语句的useEffect用于清理工作，而不是安装另一个组件或显示消息

相反，您可以使用onbeforeunload事件并清理应用程序的unmount上的处理程序，但它会向您显示一个弹出窗口，其中包含无法更改的默认消息

useEffect(() => {
function showWarning() {
return '';
}
window.addEventListener('beforeunload', showWarning);
return () => {
window.removeEventListener('beforeunload', showWarning);
}
})