基于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的使用者也不仅不减,反 ...
随机推荐
- 混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)
1.ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃 ngCordova,将主 ...
- java小题：福尔摩斯的约会
原题地址:https://www.nowcoder.com/pat/6/problem/4040 防止广告嫌疑,原题为: 题目描述 大侦探福尔摩斯接到一张奇怪的字条:"我们约会吧! 3485 ...
- 微信小程序，前端大梦想（三）
微信小程序的事件及生命周期 继续下节课,今天我们还是从四个方面来了解小程序: ●常用事件和事件冒泡 ●配置 ●app生命周期及app对象的使用 ●页面的生命周期 一.事件的 ...
- Twitter数据抓取的方法(三)
Scraping Tweets Directly from Twitters Search – Update Published August 1, 2015 Sorry for my delayed ...
- Http协议---Hyper Text Transfer Protocol
HTTP是一个基于TCP/IP通信协议来传递数据(超文本传输协议) 好久木来更新文章了~我又回归了,此刻鼓掌...... 今天就来分享下http协议的小知识,在接口测试中我们最常接触的HTTP协议,那 ...
- 记录参加QCon的心得
如有侵权,请告知作者删除.scottzg@126.com 很荣幸参加QCon全球软件开发大会,这里特别感谢我们部门的总经理,也是<互联网广告算法和系统实践>此书的作者王勇睿.因为他我才有这 ...
- C#Execl
using System.IO; using System.Text; namespace iLIS.Common { /// <summary> /// 生成Excel文档内容 /// ...
- MongoDB基础教程系列--第九篇 MongoDB 分片
1.分片介绍 分片(sharding)是将数据拆分,将其分散存到不同机器上的过程.MongoDB 支持自动分片,可以使数据库架构对应用程序不可见.对于应用程序来说,好像始终在使用一个单机的 Mongo ...
- DirectFB学习笔记一
本文记录directfb程序的基本操作流程. 1.首先创建一个directfb对象:DirectFBInit(&argc,&argv)初始化然后创建DirectFBCreate(&am ...
- 不须组件的NPOI插件 excel读取
前提: 需要DLL 1.引用 using NPOI.SS.UserModel; using NPOI.XSSF.UserModel;//用于2007版本 using NPOI.HSSF.UserMo ...