react输入 撤销
- 销毁阶段可以使用的函数：
componentWillUnmount:在删除组件之前进行清理操作，比如计时器和事件监听器。因为这些函数都是开发者手动加上去的，react不知道，必须进行手动清理。 - 实例
第一种方式：在render中，把之前已有的页面去掉，反映到页面中，就是把它删掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试触发顺序，不输入不会触发五个函数，只会触发render</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f99",
width:"200px",
height:"50px"
};
var HelloWorld= React.createClass({
render:function(){
console.log("render,4");
return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount:function(){
console.log("BOOM");
},
});
var HelloUniverse=React.createClass({
getInitialState:function(){
return {name:""};
},
handleChange:function(event){
//用来响应input的输入事件
this.setState({name:event.target.value});
},
render:function(){
if(this.state.name == "123"){
return <div>123</div>
}
return <div>
<HelloWorld name={this.state.name
//这里引用了HelloWorld的组件，所以HelloUniverse是他的子组件
}></HelloWorld>
<br />
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)
// 写为React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果
</script>
</body>
</html>输入别的不会触发
当输入123的时候
第二种：就是使用react提供的一个函数unmountComponentAtNode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f99",
width:"200px",
height:"50px"
};
var HelloWorld= React.createClass({
render:function(){
console.log("render,4");
return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount:function(){
console.log("BOOM");
},
});
var HelloUniverse=React.createClass({
getInitialState:function(){
return {name:""};
},
handleChange:function(event){
//判断的是input里面的值，如果是123，我们就使用unmountComponentAtNode来删除
//使用unmountComponentAtNode时，传入的必须是装载时候的节点。 if(event.target.value == "123"){
React.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
return;
}
this.setState({name:event.target.value});
},
render:function(){
return <div>
<HelloWorld name={this.state.name
//这里引用了HelloWorld的组件，所以HelloUniverse是他的子组件
}></HelloWorld>
<br />
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)
// 写为React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果
</script>
</body>
</html>
react输入 撤销的更多相关文章
- React 环境搭建及页面调试方法
React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...
- D触发器
普通的电路,以及常规的逻辑门都有一个共性,那就是输出直接依赖于输入,当输入消失的时候,输入也跟着不存在了.触发器不同,当它触发的时候,输出会发生变化.但是,当输入撤销之后,输出依然能够维持. 这就是说 ...
- Emacs快捷键列表
C = ControlM = Meta = Alt | EscDel = Backspace 基本快捷键(Basic)C-x C-f "find"文件, 即在缓冲区打开/新建一个文 ...
- EMACS快捷键
C = Control M = Meta = Alt | Esc Del = Backspace 基本快捷键(Basic) C-x C-f "find"文件, 即在缓冲区打开/新建 ...
- Emacs_快捷键列表
Emacs_快捷键列表 emacs -nw 以终端模式运行emacsLC_CTYPE=zh_CN.UTF-8 emacs C = Control M = Meta = Alt | EscAlt 可以粘 ...
- Emacs快捷键（较全）
C = Control M = Meta = Alt | Esc Del = Backspace 基本快捷键(Basic) C-x C-f "find"文件, 即在缓冲区打开/新建 ...
- 【UE4 设计模式】命令模式 Command Pattern
概述 描述 将一个请求封装为一个对象,从而使我们可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作. 命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务 ...
- React Native 文本输入
TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...
- Android仿iPhone晃动撤销输入功能(微信摇一摇功能)
重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...
随机推荐
- Informatic学习总结_day01
1.forlder 必须open之后才出现 mapping的界面 2.Source Qualifer 3.小技巧 验证自己写的转换格式是否正确 提前过滤一些数据,informatica工具的本质也是 ...
- 【转】Python之日期与时间处理模块（date和datetime）
[转]Python之日期与时间处理模块(date和datetime) 本节内容 前言 相关术语的解释 时间的表现形式 time模块 datetime模块 时间格式码 总结 前言 在开发工作中,我们经常 ...
- Django 聚合与查询集API实现侧边栏
本文从Django官方文档总结而来,将聚合的主要用法和查询集的常见方法做一归纳. 聚合 1. 聚合的产生来源于django数据库查询,通常我们使用django查询来完成增删查改,但是有时候需要更复杂的 ...
- 关于python中的module
python中的module(模块),关于这个概念以及使用时主要有以下几点需要注意: (1)import xx时,会首先将这个xx module中的代码执行一遍(且仅执行一遍): 例如: (2)模块包 ...
- python日志和异常
“日志”转载:http://www.cnblogs.com/dkblog/archive/2011/08/26/2155018.html "异常"转载:http://www.cnb ...
- nodejs 在线学习课堂
http://ww***/class/5359f6f6ec7452081a7873d8
- 【转】SourceInsight4破解笔记
时隔好多年,sourceinsight4以迅雷不及掩耳之势的来了.与3.5相比,sourceinsight4多了代码折叠以及文件标签功能,可谓是让sourceinsight迷兴奋了好几晚上.废话不多说 ...
- WebRTC服务器——Licode 环境搭建
WebRTC服务器--Licode 环境搭建 系统配置 阿里云服务器 Ubuntu 14.04.5 LTS Docker 环境搭建 在一台空的机器上搭建docker环境,先要安装docker,执行下面 ...
- CentOS 6.5环境实现corosync+pacemaker实现DRBD高可用
DRBD (Distributed Replicated Block Device)分布式复制块设备,它是 Linux 平台上的分散式储存系统,通常用于高可用性(high availability, ...
- 输入一个数，求1到他 的和（for循环）