javascript - 添加但未删除 beforeunload 之前的 ReactJS 事件监听器

Question

我有一个像这样的 react 组件:

import React, { PropTypes, Component } from 'react'


class MyComponent extends Component {

    componentDidMount() {
       window.addEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    render() {

        return (
            <div>
                Some content
            </div>
        )
    }

}

export default MyComponent

此处事件列表器已添加到组件中。当我刷新页面时，它会弹出窗口要求我离开页面。

但是当我转到另一个页面并刷新时，它再次显示相同的弹出窗口。

我正在从 componentWillUnmount 上的组件中删除 eventListener。那为什么不被删除呢？

如何删除其他页面上的 beforeunload 事件？

Answer 1

removeEventListener 应该获取对 addEventListener 中分配的同一回调的引用。重新创建该功能是行不通的。解决方案是在其他地方创建回调(本例中为 onUnload)，并将其作为对 addEventListener 和 removeEventListener 的引用传递:

import React, { PropTypes, Component } from 'react';


class MyComponent extends Component {
    onUnload = e => { // the method that will be used for both add and remove event
       e.preventDefault();
       e.returnValue = '';
    }

    componentDidMount() {
       window.addEventListener("beforeunload", this.onUnload);
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", this.onUnload);
    }

    render() {
        return (
            <div>
                Some content
            </div>
        );
    }

}

export default MyComponent

react Hook

您可以使用 useRef 和 useEffect Hook 将 beforeunload 事件处理抽象为自定义 Hook 。

自定义钩子(Hook)useUnload接收一个函数(fn)并将其分配给当前引用。它调用 useEffect 一次(在组件安装时)，并将事件处理程序设置为将调用 cb.current (如果是 defined )的匿名函数，并返回当组件被删除时，用于删除事件处理程序的清理函数。

import { useRef, useEffect } from 'react';

const useUnload = fn => {
  const cb = useRef(fn); // init with fn, so that type checkers won't assume that current might be undefined

  useEffect(() => {
    cb.current = fn;
  }, [fn]);

  useEffect(() => {
    const onUnload = (...args) => cb.current?.(...args);

    window.addEventListener("beforeunload", onUnload);

    return () => window.removeEventListener("beforeunload", onUnload);
  }, []);
};

export default useUnload;

用法:

const MyComponent = () => {
  useUnload(e => {
    e.preventDefault();
    e.returnValue = '';
  });

  return (
    <div>
      Some content
    </div>
  );
};