2021-10-25

最新推荐文章于 2025-12-01 15:17:28 发布

原创最新推荐文章于 2025-12-01 15:17:28 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

本文介绍了在React应用中如何使用componentWillMount和componentWillUnmount生命周期方法来监听并拦截浏览器的页面刷新和关闭事件，通过beforeunload事件处理函数确认用户是否离开页面，提供更好的用户体验。

**react 浏览器刷新/关闭拦截

  componentWillMount () {
    // 拦截判断是否离开当前页面
    window.addEventListener('beforeunload', this.beforeunload);
  }
  componentWillUnmount () {
    // 销毁拦截判断是否离开当前页面
    window.removeEventListener('beforeunload', this.beforeunload);
  }
  beforeunload (e) {
    let confirmationMessage = '你确定离开此页面吗?';
    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
  }