如何用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);
   }
 })