基于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的使用者也不仅不减,反 ...
随机推荐
- MySQL存储过程--带参数报错1064
DELIMITER $$ USE `student`$$ DROP PROCEDURE IF EXISTS `sync_student`$$ CREATE DEFINER=`student`@`%` ...
- VS Code 的常用快捷键
VS Code 的常用快捷键和插件 一.vs code 的常用快捷键 1.注释: a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b) 取消单行注释:[ctrl+k,ctrl+u] ...
- CHM文件无法打开或无法搜索
在确保CHM文件本身正常的前提下,检查c:\\windows\hh.exe和C:\\windows\system32\itss.dll和hhctrl.ocx三个文件是否存在. 如不存在,只需要从其他机 ...
- 【转】JDBC学习笔记(6)——获取自动生成的主键值&处理Blob&数据库事务处理
转自:http://www.cnblogs.com/ysw-go/ 获取数据库自动生成的主键 我们这里只是为了了解具体的实现步骤:我们在插入数据的时候,经常会需要获取我们插入的这一行数据对应的主键值. ...
- Ajax (AppServ服务器练习)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- LeetCode 108: Convert Sorted Array to Binary Search Tree DFS求解
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 解题 ...
- mySql 安装教程
看了好久别人的文章,今天就开始自己写第一篇.希望给别人能提供帮助,也可以方便自己查阅. 前两天自己安装了mysql,感觉是比oracle好装多了. mysql安装有两种方式,一种是安装包安装方式,一种 ...
- .net之简单工厂模式
//抽象一个生产笔的方法 namespace simpleFactory{ public abstract class AbstractPen { public abstract void creat ...
- DirectFB 之 通过多Window实现多元素处理
图像 设计 采用多window的方式实现显示,因为每个window可以独立的属性,比如刷新频率,也是我们最关注的 示例 /*************************************** ...
- FrameBuffer系列 之 显示图片
摘自:http://blog.csdn.net/luxiaoxun/article/details/7622988 #include <unistd.h> #include < ...