javascript - 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

在顶层组件上附加 beforeunload 事件，并在 beforeunload 事件上使渲染为空，这将触发所有子组件的 componentWillUnmount。

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

class App extends Component {
    componentDidMount() {
      window.addEventListener('beforeunload', () =>{
          this.setState({appended:true});
      });
    }
    render() {
      if(this.state.appended){
        return false;
      }else{
        return (<MyView />)
      }
    }
}


class MyView extends Component {


  componentWillUnmount() {
    this.saveState()
  }

  saveState() {
    alert("exiting")
  }

  render() {

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

}

export default MyView

希望这对你有用。