看完阮一峰的React教程后, 我写了一个TodoList
看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的。
以下是效果图:
我的源码:todolist
UI:bootstrap 4
一、组件化
我在这里主要分了上下两部分,上部分是列表展示,下部分是添加待办,先在src目录下创建一个component文件夹用来存放组件,文件夹中可以先创建两个组件文件list.js和addItem.js。
二、初始数据
先假设目前已经添加了部分了部分待办事项,所以我在根组件的state中模拟了一些数据:
lists: [
{ id: 0, txt: "read books", done: true },
{ id: 1, txt: "drink 8 cup of waters", done: true },
{ id: 2, txt: "write a note", done: false },
]
三、待办列表的展示
首先要将这些数据从根组件中同步过来,这里传值通过props就可以:
constructor(props) {
super(props);
this.state = {
lists: []
}
}
然后渲染到页面中:
<ul className="list-group">
{
this.props.lists.map((item, index) => {
return (
<li key={item.id} className="list-group-item">
{item.txt}
</li>
)
})
}
</ul>
这样就完成了最基本的数据展示,但我还需要对这个列表进行一些操作,比如勾选已办或者删除一些某项待办事项,如图
勾选可以用checkbox,Chekbox的勾选状态与代办事项的状态是同步的。删除可以在bootstrap图标里选用一个,所以列表应该是这样的:
render() {
return (
<ul className="list-group">
{
this.props.lists.map((item, index) => {
return (
<li key={item.id} className="list-group-item">
<div className="form-check">
<input
className="form-check-input" type="checkbox" value={item.txt} id={"defaultCheck" + item.id} defaultChecked={item.done}
onClick={(e) => {
this.handleChangeLists(e, index);
}} ></input>
<label className="form-check-label" htmlFor={"defaultCheck" + item.id} style={item.done ? { color: '#999', textDecoration: 'line-through' } : { color: '#333', textDecoration: 'none' }}>
{item.txt}
</label>
<button
type="button" className="close float-right" aria-label="Close"
onClick={() => {
this.handleDelete(index);
}}>
<span aria-hidden="true">×</span>
</button>
</div>
</li>
)
})
}
</ul>
)
}
以上Chekbox和删除按钮上都绑定了一个onClick事件,Checkbox需要切换事项状态,勾选即为已办,未勾选为待办,点击即切换状态:
handleChangeLists = (e, index) => {
let currIndex = index;
this.props.lists[currIndex].done = !this.props.lists[currIndex].done; this.setState({
lists: this.props.lists
})
}
删除按钮只需要做删除数据就可以了:
handleDelete = (index) => {
let currIndex = index;
this.props.lists.splice(currIndex, 1)
this.setState({
lists: this.props.lists
})
}
到这里,待办列表部分就完成了。
四、添加待办事项
这里也需要先从根组件同步数据。
constructor(props) {
super(props);
this.state = {
lists: []
}
}
然后添加待办这里,要有一个Input输入框用来输入待办事项,和一个按钮来完成添加待办的动作
render() {
return (
<form action="">
<input id="newItem" className="form-control" type="text" placeholder="其他待办事项"></input>
<button
type="button"
className="card-link btn btn-primary btn-sm btn-block"
style={{ marginTop: 10 }}
onClick={(e) => {
this.handleAddItem(e);
}}>
添加
</button>
</form>
)
}
添加按钮最主要的动作是要把input框中的value添加到数据lists中,我在handleAddItem()添加了检验,避免添加空的待办项。
handleAddItem = () => {
let newTxt = document.getElementById("newItem");
if (newTxt.value === "") {
alert("不能添加空的待办项!");
return false;
}
let len = this.props.lists.length>0 ? (this.props.lists[this.props.lists.length - 1].id + 1) : 0;
let newItem = {
id: len,
txt: newTxt.value,
done: false
}
this.props.lists.push(newItem); this.setState({
lists: this.props.lists
}, () => {
this.props.handleFresh.bind(this, this.props.lists);
//这里在setState后添加了一个回调函数,回调函数里调用的是父组件的事件,这里的传值是子传父
}); newTxt.value = "";
}
handleAddItem函数中,在setState后添加了一个回调函数,回调函数里调用的是父组件的handleFresh事件,主要用来在成功添加事项后同步父组件的数据,使新添加内容及时显示在页面上。
来自父组件的handleFresh():
handleFresh = (obj) => {
this.setState({
lists: obj
})
}
到此我的TodoList就基本完成了,实例虽然小,而且还有很多待完善的地方,但还是很有成就感的
看完阮一峰的React教程后, 我写了一个TodoList的更多相关文章
- 阮一峰的js教程,值得一读
http://javascript.ruanyifeng.com/introduction/intro.html
- SAP官网发布的react教程
大家学习React的时候,用的是什么教程呢?Jerry当时用的阮一峰博客上的入门教程,因为React使用的JSX语法并不是所有的浏览器都支持,所以还得使用browser.js在浏览器端将JSX转换成J ...
- 学习react教程
网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...
- 09.13日记(2014年9月13日00:18:26)英语,bootstrap,阮一峰,
我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
- React 入门实例教程[阮一峰的网络日志] (分享)
作者: 阮一峰 https://github.com/ruanyf/react-demos 转自:http://www.ruanyifeng.com/blog/2015/03/react.html 对 ...
- react入门(1)之阮一峰react教程
阮一峰老师的github地址:React Demos React 入门实例教程 2.ReactDOM.render() // ReactDOM.render() 将模板转化为 HTML 语言 // 参 ...
- Make 命令教程 -- 阮一峰
摘自http://www.ruanyifeng.com/blog/2015/02/make.html Make 命令教程 作者: 阮一峰 日期: 2015年2月20日 代码变成可执行文件,叫做编译(c ...
- 阮一峰:jQuery官方基础教程笔记
jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来 ...
随机推荐
- VTK 编译过程中出现的hdf5长度(I64)错误解决办法
最近在使用vtk和cuda做大规模图像处理方面的问题研究,在编译vtk的过程中发现第三方库hdf5不能够解决I64长度的探测识别问题.为了节约大家的时间,现在把我经过实践得到的解决方案共享出来,这里要 ...
- 2019.9.23JAVA课堂测试
1.题目 使用递归方式判断某个字串是否是回文( palindrome ) “回文”是指正着读.反着读都一样的句子.比如“我是谁是我”使用递归算法检测回文的算法描述如下:A single or zero ...
- QT信号槽 中的对象野指针
例: connect(&objec1,&class::slot_func1,&object2,&class::slot_func2) 如果 &objec 传 ...
- 深入理解php的输出缓冲区(output buffer)
这篇文章是翻译自Julien Pauli的博客文章PHP output buffer in deep,Julien是PHP源码的资深开发和维护人员.这篇文章从多个方面讲解了PHP中的输出缓冲区以及怎么 ...
- Spring的Aop理解
主要作用:解决代码复用,避免重复性编写代码. 比较典型的场景:日志打印,权限验证,事务处理 参考网址为:http://moon-walker.iteye.com/blog/2381532 spring ...
- 设计模式(2): 响应store中数据的变化
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. store里面响应数据变化 通常情况下,我们会把数据存在store里面 ...
- 浅谈防火墙对FTP的影响及故障排除
本文转载自:http://www.cnblogs.com/emanlee/archive/2013/01/07/2849680.html 向作者致敬! TP是常见的基于TCP的网络服务,它使用了两个 ...
- 解决hibernate 序列化死循环的问题
用ie8时,请求json,eclipse直接死机!!!! 调试时,可以用chrome,看到无限循环的报错...类似 {"empty":true,"total": ...
- 用 Python 解答两道来自阿里伯乐系统的笔试题
目录 目录 前言 题目一 分析 实现 题目二 分析 实现 前言 朋友到阿里面试,分享两道小题,博主比较闲就试着用 Python 解答一下,实现方式肯定是多种多样的,优劣也会各有不同,欢迎交流. 题目一 ...
- wpf datagrid tooltip
<DataGridTemplateColumn Header="购方名称" Width="260" HeaderStyle="{StaticRe ...