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

Question

我有一个反应组件,如:

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在其他页面上删除该事件？

Answer 1

removeEventListener应该获得对分配的相同回调的引用addEventListener.重新创建功能是行不通的.解决的办法是(别处创建回调onUnload在该示例中),并把它作为参考都addEventListener和removeEventListener:

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


class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.onUnload = this.onUnload.bind(this); // if you need to bind callback to this
    }

    onUnload(event) { // the method that will be used for both add and remove event
        console.log("hellooww")
        event.returnValue = "Hellooww"
    }

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

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

    render() {

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

}

export default MyComponent