[React] Setup 'beforeunload' listener
In this lesson we'll show how to take a beforeUnload
call and convert it to a declarative React Component. It will handle subscribing to events, and automatically unsubscribing to prevent memory leaks.
class BeforeUnload extends React.Component { constructor(props) {
super(props);
this.alertMessage = this.alertMessage.bind(this);
} componentDidMount() {
window.addEventListener("beforeunload", this.alertMessage);
} componentDidUpdate(prevProps, prevState) {
const { active } = this.props;
const { active: wasActive } = prevProps; if (wasActive && !active) {
window.removeEventListener("beforeunload", this.alertMessage);
} else if (!wasActive && active) {
window.addEventListener("beforeunload", this.alertMessage);
}
} componentWillUnmount() {
window.removeEventListener("beforeunload", this.alertMessage);
} alertMessage(e) {
if (this.props.active) {
e.returnValue = true;
return true;
}
} render() {
return this.props.children;
}
} class App extends React.Component { constructor(props) {
super(props);
this.state = {
active: true,
}
this.toggle = this.toggle.bind(this);
} toggle() {
this.setState((state) => {
return { active: !state.active }
}
);
} render() {
return (
<BeforeUnload active={this.state.active}>
<button onClick={this.toggle}>{this.state.active ? "Active": "Inactive"}</button>
</BeforeUnload>
);
}
} ReactDOM.render(
<App />,
document.getElementById('example')
);
[React] Setup 'beforeunload' listener的更多相关文章
- React——教程 && 零基础入门 && 从实践中学习(待续)
Tutorial: Intro to React This tutorial doesn’t assume any existing React knowledge. Tip This tutoria ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
- Google地图接口API之地图控件集(五)
1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:
- kali客户端攻击
浏览器攻击 browser_autpwn2 (BAP2) mkdir /test 为接受响应的服务器创建目录 use auxiliary/server/browser_autopwn2 set ...
- New UWP Community Toolkit - Markdown
概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 MarkdownTextBlock 和 MarkdownDoc ...
- 聊聊jstack的工作原理
实现一个jstack 在聊Jstack得工作原理前呢,不如让我们先写一个简单的jstack玩玩.不用怕,很简单的,就几行代码的事,看: public class MyJstack { public s ...
- Kali-linux使用SET实施攻击
前面介绍了社会工程学工具包(SET)的简单使用.为了能帮助用户更容易的理解社会工程学的强大功能.本节将介绍使用社会工程学工具包实施各种攻击. 7.4.1 针对性钓鱼攻击向量 针对性钓鱼攻击向量通过构造 ...
- ESP32 LyraT音频开发板试玩(二):播放音乐
我是卓波,很高兴你来看我的博客. 系列文章: ESP32 LyraT音频开发板试玩(一):搭建开发环境 ESP32 LyraT音频开发板试玩(二):播放音乐 本文延续上一篇博客 将D:\msys32\ ...
- WebSocket 网页聊天室
先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...
随机推荐
- C/C++(语句,数组)
C语言语句: 两大选择,三大循环,四大跳转 两大跳转:if,switch 三大循环:for,while,do-while 四大跳转:break,continue,goto,return do-whil ...
- Python datetime time 等时间 日期 之间的计算和相互转化
from datetime import datetime, date, timedelta, timezone from time import time, ctime, localtime, st ...
- google 分屏 横屏模式 按home键界面错乱故障分析(二) 分屏的启动过程
google 进入分屏后在横屏模式按home键界面错乱(二) 你确定你了解分屏的整个流程? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240&quo ...
- launcher- 第三方应用图标替换
有时候我们感觉第三方应用的icon不美观,或者跟我们主题风格不一致,这时候我们希望换成我们想要的icon,那我们可以这么做(以更换QQ应用icon为例): 1.首先我们当然要根据自己的需要做一张替换i ...
- matlab (.m)文件生成 windows 可执行(.exe)文件
mex -setup:设置 C 语言编译器:(如果本地安装有 visual studio 20xx 集成开发环境,则会自动选择其下的 C/C++ 编译器 ) 将运行时环境(runtime enviro ...
- SQL数值转字符串保留指定小数位
IF EXISTS ( SELECT * FROM sysobjects WHERE xtype = 'fn' AND name = 'fn_NumberFormat' ) BEGIN DROP FU ...
- Day4上午解题报告
预计分数:50 +0+0=50 实际分数:50+0+10=60 毒瘤出题人,T3不给暴力分 (*  ̄︿ ̄) T1 https://www.luogu.org/problem/show?pid=T155 ...
- Mysql 5.7.17 解压版(ZIP版)安装步骤详解
下载 解压版下载地址(需要登录) :http://dev.mysql.com/downloads/mysql/ 下载后解压到你想要安装的目录就可以了 配置环境变量 为了方便使用,不必每次都进入bin目 ...
- linux下多进程的文件拷贝与进程相关的一些基础知识
之前实现了用文件IO的方式能够实现文件的拷贝,那么对于进程而言,我们是否也能够实现呢? 答案是肯定的. 进程资源: 首先我们先回想一下,进程的执行须要哪些资源呢?其资源包含CPU资源,内存资源,当然还 ...
- java8新增特性(二)----函数式接口(Functional)
上一篇博客介绍了java8新增的Lambda表达式,这一节介绍一下java8的函数式编程,两者之间有什么联系呢?请往下看~~~ Lambda表达式怎样在java类型中表示的呢? 语言设计者投入了大量的 ...