reactjs事件侦听器beforeunload添加但未删除

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个类似的反应成分：

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

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

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

我正在eventListener从中删除组件componentWillUnmount。那为什么不将其删除呢？

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

回答：

本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

回答：

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

自定义钩子useUnload接收一个函数（fn）并将其分配给当前引用。它会调用useEffect，并设置事件处理程序，并在删除组件时返回清除函数以删除事件处理程序。

import { useRef, useEffect } from 'react';
const useUnload = fn => {
  const cb = useRef(fn);
  useEffect(() => {
    const onUnload = cb.current;
    window.addEventListener("beforeunload", onUnload);
    return () => window.removeEventListener("beforeunload", onUnload);
  }, [cb]);
};
export default useUnload;

const MyComponent = () => {
  useUnload(e => {
    e.preventDefault();
    e.returnValue = '';
  });
  return (
    <div>
      Some content
    </div>
  );
};

以上是 reactjs事件侦听器beforeunload添加但未删除 的全部内容， 来源链接： utcz.com/qa/431085.html

回到顶部