基于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的使用者也不仅不减,反 ...
随机推荐
- Hbuilder开发移动App（1）
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
- 5 安装Alloc服务
cnblogs-DOC 1.服务器环境 2.安装Redis3.安装Zookeeper4.安装MPush5.安装Alloc服务6.完整测试7.常见问题 一.Linux安装Mpush-Alloc [roo ...
- EasyUI之Hello world（EasyUI的入门学习）
1:创建一个动态web工程: 去官网http://www.jeasyui.net/download/下载官网文档 我去官网下载的最新版本,个人根据自己的需求下载即可.2:在webConte ...
- 看看我做的一款 时间轴 插件 timegliderJs
TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...
- 移动端测试方案--sptt
sptt sptt是移动端UI自动化测试的一种解决方案,全称为special tool of test.sptt提供了一套测试解决方案,并使用命令行完成相关操作,最终可集成在各种后续的流程中. spt ...
- C++ 头文件系列(system_error)
1.为什么system_error "....report error conditions originating from the operating system or low-lev ...
- cmd中关闭windows2008错误弹窗
net stop sharedaccess reg add HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Windows /v ErrorMode / ...
- Golang 在mac上用VSCode开发、Delve调试
本文包含以下内容: 1.安装VSCode: 2.用Delve调试Go项目: 3.自定义代码片段: 1.安装VSCode 先去下载VSCode,这个链接里面也有官方文档. 安装插件: vscode-ic ...
- Java Web实现IOC控制反转之依赖注入
控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...
- MongoDB3.4 shell CRUD操作
输入db,显示你正在操作的数据库:切换数据库,输入use dbName,如果数据库不存在的话会自动帮我们创建一个:使用show dbs可以显示所有可用的数据库. 测试数据在文末 插入文档 插入操作的行 ...