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 ...
随机推荐
- border-color: transparent rgb(255, 48, 48) transparent transparent;
border-color: transparent rgb(255, 48, 48) transparent transparent;
- Python爬虫学习系列教程
最近想学一下Python爬虫与检索相关的知识,在网上看到这个教程,觉得挺不错的,分享给大家. 来源:http://cuiqingcai.com/1052.html 一.Python入门 1. Pyth ...
- Google想出了一个决定人员晋升的算法，然后就没有然后了......
Google 有点跑偏了,逗死我了~实践一下也好~ Prasad Setty 是 Google People Analytics 团队的副总裁.7 年前 Google 成立的这支团队的职责是收集和利用 ...
- Android 分析 Android 应用结构
本文说明 Android 项目组成,虽然简单,但决不能忽视. 当你从简单 Hello World 程序,到会实现一些常见功能,比如,下拉(上拉)刷新最新(加载更多),消息处理(UI 通知更新),Vie ...
- GB2312码表
GB2312码表 code +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F A1A0 . . · ˉ ˇ ¨ " 々 — - | … ‘ ’ ...
- WIN10 64位系统 如何安装.NET Framwork3.5
把SXS文件夹复制到C盘根目录,然后以管理员身份运行CMD,大概2分钟能完成,然后这个SXS文件夹就可以删了
- 【Ubuntu】Ubuntu网络配置DNS失效问题处理
安装了Ubuntu Server版本,配置了静态IP地址,并配置了DNS.但重启之后,发现连接外网时候,还是存在问题. 找了一下,是DNS的问题. 可以这样处理: lifeccp@ubuntu:~/w ...
- 微软BI 之SSRS 系列 - 如何实现报表导航 Navigation 和钻取 Drill Down 的效果
开篇介绍 如何在 SSRS 报表中实现标签导航 Navigation 和向下钻取 Drill Down的效果? 如同下面这个例子一样 - 在页面第一次加载的时候,默认显示是全部地区的销售总和情况,上面 ...
- Mysql中使用Group_Concat将列组合进来。
一.上例子: ) as CityId,group_concat(stationId) ,NameCn from `wd-area` where type='cn3k' and areaId like ...
- C++ 第六课：C/C++关键字及其用法
asm 插入一个汇编指令. auto 声明一个本地变量. bool 声明一个布尔型变量. break 结束一个循环. case 一个switch语句的一部分. catch 处理 thrown 产生的异 ...