当页面刷新或关闭时，reactjs 调用特定的函数

Question

我有一个组件，如：

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


class MyView extends Component {

    componentDidMount() {
        window.addEventListener('onbeforeunload', this.saveState())
    }

    componentWillUnmount() {
        window.removeEventListener('beforeunload', this.saveState())
    }

    saveState() {
        alert("exiting")
    }

    render() {

        return (
            <div>
                Something
            </div>
        )
    }

}

export default MyView

在这里，当用户刷新页面时，我想调用一个特定的函数，当调用完成时，我想刷新页面。用户关闭页面时相同。

在我上面的代码中，我添加了一个事件侦听器onbeforeunload并调用了一个saveState函数。

但在这里我componentDidMount的工作正常。onbeforeunload和saveState函数在页面加载时正常调用，而不是在页面刷新或退出时调用。

这里有什么问题，我如何在有人退出或刷新页面以响应时调用特定的函数或发出警报？

在上面的代码中

Answer 1

根据这个，尝试这个语法：

componentDidMount() {
    window.addEventListener('onbeforeunload', this.saveState)
}

componentWillUnmount() {
    window.removeEventListener('beforeunload', this.saveState)
}