如何使用反应挂钩设置离开警告？答案

【问题标题】：How to set a leaving warning with react hooks?如何使用反应挂钩设置离开警告？
【发布时间】：2020-12-11 05:37:37
【问题描述】：

我正在制作一个需要显示进度的应用程序，如果你回击，它将丢失。

我确实使用了 useEffect 钩子：

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

我可以使用哪个函数来停止此返回操作，以便显示我的警告并确认？

【问题讨论】：

标签： reactjs react-hooks back unmount

【解决方案1】：

如果您使用react-router，您有Prompt 来处理这种行为。您可以在此处了解更多信息：https://reactrouter.com/core/api/Prompt

【讨论】：

【解决方案2】：

“我可以使用哪个函数来停止此返回操作”如果您的意思是要阻止浏览器完成其操作，那么这不是设计应用程序的方式，useEffect 和 return 语句用于清理工作和不是为了安装另一个组件或显示消息

您可以改为使用onbeforeunload 事件并清理应用程序的unmount 上的处理程序，但它会显示一个带有无法更改的默认消息的弹出窗口

 useEffect(() => {
   function showWarning() {
     return '';
   }

   window.addEventListener('beforeunload', showWarning);

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

【讨论】：