基于react的简单TODOList
前段时间看了下react，写个栗子记录
页面效果如下
效果：展示代办事件，正文加了删除线的是已经完成的，未加横杠的是未完成的，
交互：1、在input里面输入新添加的内容，点击Add按钮添加代办事件
2、点击事件toggle完成状态
3、切换显示已完成，未完成，全部
代码如下：
1、页面基本架子的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<script src="react-demos-master/build/react.js"></script>
<script src="react-demos-master/build/react-dom.js"></script>
<script src="react-demos-master/build/browser.min.js"></script>
</head>
<body>
<div id="todoList"></div>
</body>
</html>
2、一些原有的todo
var items = [
{text:'Sth1',id:1,statue:false},
{text:'Sth2',id:2,statue:true},
{text:'Sth3',id:3,statue:true},
{text:'Sth4',id:4,statue:true}
]
3、页面的jsx
3.1、基本外层元素
var id = 10;
var TodoApp = React.createClass({
getInitialState:function(){
return {
items:[]
}
},
componentDidMount:function(){
this.setState({items:items})
},
handleSubmit:function(e){
items.push({
text:this.refs.myTextInput.value,
id:id++,
statue:false
});
this.setState({items:items});
this.refs.myTextInput.value = "";
e.preventDefault();
},
showState:function(type){
var filterItems = [];
if(type == "all"){
filterItems = items
}else{
filterItems=items.filter((v)=>{
return v.statue == eval(type);
})
}
this.setState({items:filterItems})
},
render:function(){
return (
<div>
<TodoList list = {this.state.items}/>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="myTextInput" onChange={this.handleChange}/>
<input type="submit" value="Add" onClick={this.handleSubmit} />
</form>
<Footer showState={this.showState}/>
</div>
)
}
})
ReactDOM.render(<TodoApp items={items} />, todoList);
在这里主要涉及了，
(1)state(组件可变属性)和props（组件不可变属性）的使用；
(2)refs获取真正的DOM节点；
(3)UI组件颗粒度尽量小，方便重用；
3.2显示list的jsx
var TodoListItem = React.createClass({
getInitialState:function(){
return {
statue:this.props.statue
}
},
toggleState:function(){
this.setState({statue:!this.state.statue})
},
render:function(){
if(!this.state.statue){
return (
<li onClick={this.toggleState}>{this.props.text}</li>
)
}else{
return (
<li onClick={this.toggleState}><s>{this.props.text}</s></li>
)
}
}
});
var TodoList = React.createClass({
render:function(){
var listItem = this.props.list.map(function(item){
return <TodoListItem key={item.id} text={item.text} statue = {item.statue}></TodoListItem>
})
return (
<ul>
{listItem}
</ul>
)
}
});
3.3 filter功能部分的jsx
var FilterLink = React.createClass({
render:function(){
return (
<a href="javascript:void(0)" onClick={this.props.onClick.bind(null,this.props.filter)}>{this.props.text}</a>
)
}
});
var Footer = React.createClass({
render:function(){
return (
<div>
<p>Filter:</p>
Done:
<FilterLink filter="true" text="Done" onClick={this.props.showState} />;
noDone:
<FilterLink filter="false" text="noDone" onClick={this.props.showState} />;
All:
<FilterLink filter="all" text="All" onClick={this.props.showState} />;
</div>
)
}
});
例子的全部代码如下
<!DOCTYPE html>
<html>
<head>
<script src="react-demos-master/build/react.js"></script>
<script src="react-demos-master/build/react-dom.js"></script>
<script src="react-demos-master/build/browser.min.js"></script>
</head>
<body>
<div id="todoList"></div> <script>
var items = [
{text:'Sth1',id:1,statue:false},
{text:'Sth2',id:2,statue:true},
{text:'Sth3',id:3,statue:true},
{text:'Sth4',id:4,statue:true}
]
</script>
<script type="text/babel">
var TodoListItem = React.createClass({
getInitialState:function(){
return {
statue:this.props.statue
}
},
toggleState:function(){
this.setState({statue:!this.state.statue})
},
render:function(){
if(!this.state.statue){
return (
<li onClick={this.toggleState}>{this.props.text}</li>
)
}else{
return (
<li onClick={this.toggleState}><s>{this.props.text}</s></li>
)
} }
});
var TodoList = React.createClass({
render:function(){
var listItem = this.props.list.map(function(item){
return <TodoListItem key={item.id} text={item.text} statue = {item.statue}></TodoListItem>
})
return (
<ul>
{listItem}
</ul>
)
}
});
var FilterLink = React.createClass({
render:function(){
return (
<a href="javascript:void(0)" onClick={this.props.onClick.bind(null,this.props.filter)}>{this.props.text}</a>
)
}
});
var Footer = React.createClass({
render:function(){
return (
<div>
<p>Filter:</p>
Done:
<FilterLink filter="true" text="Done" onClick={this.props.showState} />;
noDone:
<FilterLink filter="false" text="noDone" onClick={this.props.showState} />;
All:
<FilterLink filter="all" text="All" onClick={this.props.showState} />;
</div>
)
}
}); var id = 10;
var TodoApp = React.createClass({
getInitialState:function(){
return {
items:[]
}
},
componentDidMount:function(){
this.setState({items:items})
},
handleSubmit:function(e){
items.push({
text:this.refs.myTextInput.value,
id:id++,
statue:false
});
this.setState({items:items});
this.refs.myTextInput.value = "";
e.preventDefault();
},
showState:function(type){
var filterItems = [];
if(type == "all"){
filterItems = items
}else{
filterItems=items.filter((v)=>{
return v.statue == eval(type);
})
}
this.setState({items:filterItems})
},
render:function(){
return (
<div>
<TodoList list = {this.state.items}/>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="myTextInput" onChange={this.handleChange}/>
<input type="submit" value="Add" onClick={this.handleSubmit} />
</form>
<Footer showState={this.showState}/>
</div>
)
}
})
ReactDOM.render(<TodoApp items={items} />, todoList);
</script>
</body>
</html>
有时间再写个用redux来管理数据的TODOList的例子吧（希望自己别太懒）
基于react的简单TODOList的更多相关文章
- 一个简单的 react 实例： < TodoList >
< react TodoList: > 组件: //引入React : import React from 'react'; //组件 class TodoList exten ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- 基于React Native的移动平台研发实践分享
转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...
- 前端基于react,后端基于.net core2.0的开发之路（1） 介绍
文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数 ...
- 前端基于react,后端基于.net core2.0的开发之路（2） 开发环境的配置，注意事项，后端数据初始化
前端环境配置 项目介绍文章:前端基于react,后端基于.net core2.0的开发之路(1) 介绍 1.VSCode安装 下载地址:https://code.visualstudio.com/Do ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- React-Native（三）：React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
- 放弃antd table，基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
随机推荐
- NPM（Node.js） 使用介绍
前言:express 推出了4.X,自己尝试了一下,出现了各种问题.结果查看了各种文档和问题,现在在这个给大家分享下4.X版本的安装. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具, ...
- 解决EditText不能撑满全屏的问题及EditText你应该知道的属性
一般我们要实现去下图一的效果很简单: 两个EditText就搞定 效果图一: 但是我们想让第二个EditText撑满剩余空间怎么做?如效果图二 效果图二: 解决: 使用了ScrollView嵌套L ...
- php写流程管理
流程控制即某个人发起一个流程,通过一层一层审核,通过后,完成整个流程,若有一层审核未通过,中断整个流程.即结束! 比如请假流程: 某一员工发起一个请假流程,那么这个流程的节点人员即他的上级,上上级,上 ...
- qq面板（仿版，未完待续中。。。。）---2017-04-24
主要实现效果: 1.点击对话,显示对话:点击联系人,显示联系人 2.在联系人界面: 实现好友列表的展开与折叠:(图12) 实现鼠标移到好友列表上的背景颜色的变化:(图3) 选中的好友背景颜色改变(图4 ...
- PHP命名空间理解
这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! use 就是声明要用某个路径的文件(类) 再有namespace的情况下,就类似于已经在一个路径里了 这个时候 ...
- [ext4]01 磁盘布局 - block分析
ext4文件系统最基本的分配单元是"block"(块). block是由一组连续的sectors来组成,其大小介于1k~4K之间,当然不可能是任意值,只能是2的整数次幂个secto ...
- Qt:添加点击事件的Label并显示图片
1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...
- Failed to read artifact descriptor for xxx:jar 的Maven项目jar包依赖配置的问题解决
在开发的过程中,尤其是新手,我们经常遇到Maven下载依赖jar包的问题,也就是遇到“Failed to read artifact descriptor for xxx:jar”的错误. 对于这种非 ...
- 搭建本地git仓库
使用工具:git|码云 步骤: 注册码云账号,创建项目名称等. 本地git配置 本地文件目录:git init(初始化创建分支master) 基础配置:git config --global user ...
- Redis开启远程登录连接。
今天使用jedis客户端api连接远程连接redis的时候,一直报错,如下: redis.clients.jedis.exceptions.JedisConnectionException: java ...