React(0.13) 定义一个使用动画
2024-10-19 00:28:23
<!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>
最新文章
- CF460D Little Victor and Set (找规律)
- 掌握VS2010调试 -- 入门指南
- SlickGrid example 3: 可编辑单元
- android学习—— LayoutInflater的使用
- Unity3D 灰度shader(改编自NGUI)
- Linux上使用Azure CLI来管理Azure
- 基础篇系列,JAVA的并发包 - 锁
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(三)
- Manjaro搭建无密访问samba服务器
- C# FTP操作类的代码
- 安装selenium,驱动geckodriver,及出现的问题
- 【转】.MD语法入门
- Docker容器学习梳理 - Dockerfile构建镜像
- Arrays类的使用
- iOS开发-NSDictionary
- 树莓派 Zero W+温度传感器DS18B20
- springBoot上传文件时MultipartFile报空问题解决方法
- 设计模式笔记-观察者(Observer)
- Python学习---django模板继承180123
- 20155327 嵌入式C语言课堂补交