基于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的使用者也不仅不减,反 ...
随机推荐
- 用pl/sql游标实现约瑟夫环
什么是约瑟夫环: 约瑟夫环(约瑟夫问题)是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为1的人开始报数,数到m的那个人出列:他的下一个人又从1开始报数, ...
- Bootstrap基础学习(一)—表格与按钮
一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...
- MyEclipse常见错误
1.Could not create the view: An unexpected exception was thrown java.lang.NullPointerException a ...
- 解决tomcat debug 调试时间过长的问题
做java web很早就碰到一个问题,eclipse 的调试有时候忽然启动时间奇慢 ,但是正常启动速度没问题,其他项目也完全正常 后来想想也不影响项目运行,也没太在意 不过今天又碰到这问题了,而且启动 ...
- 处理json数据的空数据为任意字符
处理json数据的空数据为任意字符 有时候从后台返回来的数据需要处理一下,根据实际开发需求,不能在页面上直接显示空字符,需要显示为"无内容"或者其他字段,而有些json数据结构比较 ...
- chrome浏览器tab页内存占用变大，网站变慢为哪般？
问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...
- 实现全局同一编码：Filter
request.setCharacterEncoding("UTF-8");只对POST方式提交有用 对于GET方式 ,可以有装饰模式和适配器模式,对获取参数的函数进行重写. 对所 ...
- webmagic源码学习(一)
最近工作主要是一些爬虫相关的东西,由于公司需要构建自己的爬虫框架,在调研过程中参考了许多优秀的开源作品,包括webmagic,webcollector,Spiderman等,通过学习这些优秀的源码获益 ...
- git 利用分支概念实现一个仓库管理两个项目
需求描述:开发了一个网站,上线之际,突然另一个客户说也想要个一样的网站,但网站的logo和内部展示图片需要替换一下,也就是说大部分的后台业务逻辑代码都是一致的,以后升级时功能也要保持一致:刚开始想反正 ...
- Less和Sass的使用
[Less中的变量] 1.声明变量:@变量名:变量值; 使用变量:@变量名 @length:100px; @color:yellow; @opa:0.5; >>>Less中变量的类 ...