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

根据this，请尝试以下语法：

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

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

Answer 2

在顶级组件和onunload事件上附加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

希望这对你有用。

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

2 个答案: