React(0.13) 定义一个使用动画
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
<script src="../build_0.13/react-with-addons.min.js"></script>
<style type="text/css">
.example-enter{color:red;}
.example-active{color:green;}
</style>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems = this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}> {item} </div> );
}.bind(this));
return ( <div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div> );
}
}); //将组件加到对应的元素上
React.render( <TodoList />, document.getElementById('example') );
</script>
</body>
</html>
React(0.13) 定义一个使用动画的更多相关文章
- React(0.13) 定义一个checked组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个多选的组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个input组件，使其输入的值转为大写
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(注释，样式)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(函数作为动态的值)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件
1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...
- React(0.13) 组件的组合使用
<html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...
- React(0.13) 利用componentDidMount 方法设置一个定时器
<html> <head> <title>hello world React.js</title> <script src="build ...
随机推荐
- Java中夏令时带来的Date不一致问题 （转）
http://www.cnblogs.com/snake-hand/archive/2013/06/10/3131157.html 最近同事W发现使用Java Date创建日期,在不同的机器上执行,得 ...
- iOS中文API之UIResponder介绍
该UIResponder类定义了响应和处理事件的对象接口.它是UIView和UIApplication的超类(UIWindow).这些类的实例有时被称为响应者对象,简单地说就是响应者. 通常有2种事件 ...
- 使用CSS3生成的电子时钟特效
在线演示 本地下载 突然觉得自己对带工作的态度亟需改正,虽然不喜欢现在的加班生活,但是自己要去接受自己不喜欢的,才能获得自己喜欢的. 这是自己好久之前丛过的一个时钟,网上应该有这个的教程,虽然实现的效 ...
- Java Synchronized 关键字
本文内容 Synchronized 关键字 示例 Synchronized 方法 内部锁(Intrinsic Locks)和 Synchronization 参考资料 下载 Demo Synchron ...
- C#.NET常见问题(FAQ)-如何让Listbox支持多选
把SelectionMode改成MultiExtended 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的在线 ...
- CAD块参照转实体
经常,需要在CAD中插入块,比如图框,它的类型是INSERT,而不是Line和PolyLine.一般情况下,我们是不会去编辑它的,但有的时候需要选择它,比如在选择打印范围时,默认为过滤掉INSERT类 ...
- Asp.Net 之 禁用TextBox的记忆功能
IE提供了一个自动完成功能可以记忆我们的输入内容(如登录帐号等),方便下一次快速地录入类似资料.这确实是一个非常友好的功能,在操作时只需用鼠标双击文本框或输入前几个字符,系统会自动列出以前的录入历史供 ...
- 微信小程序 - 自定义弹窗组件
2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...
- 算法笔记_217:黑洞数（Java）
目录 1 问题描述 2 解决方案 1 问题描述 任意一个5位数,比如:34256,把它的各位数字打乱,重新排列,可以得到一个最大的数:65432,一个最小的数23456.求这两个数字的差,得:41 ...
- ubuntu 下 cajview 替代方案
.caj 是知网提供的论文的标准格式,但是,知网只提供 win 版的工具.这里尝试了两个两个方案,均可行,做一下记录在此. 1. 使用 wine 版的 cajview pdf 可以正常用,但是 ca ...