黑松山资源网 Design By www.paidiu.com
基于React的一个简单Todo-list
先赌为快:在线DEMO,感觉还不错点一下star -_- ~
源码地址:
一、已经完成的功能
1、新增选项(默认未完成)
2、完成状态可以切换
3、当前选项可以删除
4、全部选项选中状态切换
5、全部个数,完成个数,未完成个数实时读取
6、刷新状态不变
7、双击可以编辑(有个坑:双击编辑内input的keyUp Enter保存会连带触发blur失去焦点保存。已解决:通过设置一个可以保存的状态控制)
二、待完成(新增路由)
三、目录结构
3.1、主要逻辑只涉及:Todo(父组件),TodoAdd(输入框子组件一),TodoList(选项列表子组件二)
3.2、父子组件通过props(可以是自定义属性、对象、回调函数)通信,每个组件都有自己的state,可以通过setState改变当前的state。
例如:新增的时候,父组件是如何知道新增了一个什么内容呢?如下:
// Todo.jsx内 //1 传递给子组件的回调函数,只要有心得内容传递过来,就更新当前的:list。list只要更新,通过props传递给TodoList的data就会更新,DOM就会新增一个选项列表 onAddSubmit(addTitle) { console.log("增加了:" + addTitle) let addItem = { title: addTitle, isFinished: false } this.state.list.unshift(addItem) this.setState({ list: this.state.list }) this._saveToSession() } // 通过props传递给子组件(等待使用) <TodoAdd onAddSubmit={this.onAddSubmit} /> // TodoAdd.jsx // 2、點擊enter鍵:有值就確認增加 _onKeyUpEnter(e) { if (e.keyCode == 13) { this.confirmAddItem() } } // 3、失去焦點:有值就確認增加 _onBlurEnter(e) { this.confirmAddItem() } // 4、確認增加,调用父组件的回调函数,传递参数 confirmAddItem() { if (this.state.title) { this.props.onAddSubmit(this.state.title) //把新增的内容通过props传进来的回调函数告诉父组件Todo,有新的内容来了 // 置空當前 this.setState({ title: "" }) } }
其他:上面这个简单的父子组件的通信过程和es6模块化通信非常类似,只是react做了优化,比如上面的使用es6来模拟如下,只是做了通信模拟:
// Todo.js 父模块 import TodoAdd from "./TodoAdd" import TodoList from "./TodoList" class Todo { constructor() { this.list = [] this.TodoAdd = new TodoAdd({ // 父模块给子模块的回调 resetList: (content) => { if (content) { this._updateList(content) } } }) this.TodoList = new TodoList({ list: this.list, }) } _updateList(content) { this.list.push(content) // 调用子模块的方法更新内部列表 this.TodoList && this.TodoList._getNewList(this.list) } } module.exports = Todo // TodoAdd.js 新增子模块 class TodoAdd { constructor({ resetList, }) { this.resetList = resetList } _onSubmit(str) { if (str) { // 1、告诉父模块新增了 this.resetList(str) } } } module.exports = TodoAdd // TodoList.js 列表子模块 class TodoList { constructor({ list, }) { this.list = [] this._getNewList(list) } // 3、监听父模块是否要更新 _getNewList(newList) { this.list = newList // 其他操作 } } module.exports = TodoList
以上所述是小编给大家介绍的React中的todo-list ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 《哈迪斯2》EA阶段至少持续到年底!此前将有重大更新
- 崩坏星穹铁道梦中之梦12平民满星攻略 梦中之梦12阵容搭配分享
- 钟志刚《淡淡君情》24K金限量头版[低速原抓WAV+CUE]
- 金山游戏封神再临视频首曝 预计年内上线
- IGN分享PC《对马岛之魂》28分钟实机:极致的画面表现
- 崩坏星穹铁道平民神主日怎么打 神主日萌新通关攻略
- 蜀门手游五月大服龙城飞将开启 全新大逃杀玩法上线
- 钟明秋《是时候HQ》头版限量编号[低速原抓WAV分轨]
- 赵传《我是一只小小鸟》日本东芝1A1版 [WAV+CUE][435M]
- 庄达菲《东张西望》[320K/MP3][40.28MB]
- 庄达菲《东张西望》[24bit 48kHz][FLAC/分轨][288.46MB]
- 金海心.-.[心感觉].专辑[原抓WAV+CUE]
- KOKIA心は?かり(2012K2HD2016Mora)[24bit96kHzFLAC]
- 林一峰2017-绝对清白2CD[香港首版][WAV+CUE
- 石凯《数星一整夜》[320K/MP3][44.18MB]