Question

我正在尝试使用用户使用以下代码在用户关闭标签页时打开弹出窗口：

useEffect(() => {
    
    window.addEventListener('beforeunload',handleUnload );
    return () => {
      window.removeEventListener('beforeunload', handleUnload);
    }
  }, []);
  

  const handleUnload = (e) => {
    e.preventDefault();
   console.log('hey')
   alert("HEY");
  }

有没有其他方法可以做到这一点，或者有什么我可以纠正代码的方法？目前，我正在尝试提醒用户。

Answer 1

欢迎来到！

我认为您无意中使用了NFS来破坏功能。

尝试一下：

{}

我已将useEffect(() => { window.addEventListener("beforeunload", handleUnload); return () => window.removeEventListener("beforeunload", handleUnload); }, [handleUnload]);添加到useEffect的第二个属性，以防止它在每次状态更改时添加和删除事件侦听器。

Answer 2

尝试使用引用：

const useUnload = (fn) => {
  const cb = React.useRef(fn);

  React.useEffect(() => {
    const onUnload = cb.current;
    window.addEventListener('beforeunload', onUnload);
    return () => {
      window.removeEventListener('beforeunload', onUnload);
    };
  }, [cb]);
};

然后用这个来调用

useUnload((e) => {
  e.preventDefault();
  console.log('hey')
  alert("HEY");
});

事件侦听器在卸载前不起作用

2 个答案: