基于反应的简单待办事项列表

先下注：在线DEMO，感觉不错。单击星号-_- ~

源地址：

一.已完成的职能

1.添加选项(默认情况下未完成)

2.可以切换完成状态

3.当前选项可以删除

4.选择所有选项进行状态切换

5.实时读取总数、完成数和未完成数

6.刷新状态保持不变

7.双击编辑(有一个坑：双击编辑中输入的键向上回车保存会触发模糊失焦保存。已解决：通过设置可保存的状态控件)

第二，待完成(新路线)

三、目录结构

3.1.主要逻辑只涉及：Todo(父组件)、TodoAdd(输入框子组件1)、TodoList(选项列表子组件2)

3.2.父组件和子组件通过道具(可以是自定义属性、对象和回调函数)进行通信。每个组件都有自己的状态，当前状态可以通过setState改变。

例如，添加时，父程序集如何知道添加了什么？如下所示：

//在todo.jsx //1中，只要传递内容，传递给子组件的回调函数就会更新当前：list。只要列表更新，通过道具传递给TodoList的数据就会更新，DOM会在on addsubmit(addtitle){ console . log(' add:' addtitle)上添加一个选项列表，让additive={ title: addtitle。isfinished : false } this . state . list . unshift(addItem)this . setstate({ list : this . state . list })this。_saveToSession() }//通过道具传递给子组件(等待使用)todo add onaddsubmit={this。onaddsubmit }//ToDoAd . jsx//2。点击输入：如果有值，确认添加_ onkeyupenter(e){ if(e . key code==13){ this。confirmined item()} }//3。失去焦点：如果有值，确认添加_ onbulenter(e){ this。confirmined item()}//4。确认添加并调用父组件的回调函数。传递参数confirmined item(){ if(this。state.title) {this。props.onaddsubmit(这。state . title)//通过props传入的回调函数告诉父组件新添加内容的Todo。新内容来了。//离开当前这个。setstate({ title : ' ' })} } Others:上面简单的父子组件的通信过程与es6的模块化通信非常相似，只是react进行了优化。例如，上面用es6进行的模拟如下，只进行通信模拟：

//Todo.js父模块从“”导入todo add。/todo添加“从导入到列表”。/todo olist ' class todo { constructor(){ this。list=[]这个。ToDoAd=new ToDoAd({//回调重置列表：(内容)={if(内容){this。_更新列表(内容)}}})这一点。TodoList=new TodoList({ list : this . list，})} _ updatelist(content){ this . list . push(content)//调用子模块的方法来更新内部列表this . TodoList this . TodoList . _ getnew list(this . list)} }模块. exports=todo//toloaded . js添加一个新的子模块类to loaded { constructor({ resetlist，}) {this。reset list=reset list } _ onsubmit(str){ if(str){//1，告诉父模块这一点。reset list(str)} } } module . exports=to loadd///Class to olist { constructor({ list，}) {this。list=[] this。_ getnewlist (list)}//3。监视父模块是否应该更新_ getnewlist (newlist) {this。list=new list//other operations } } module . exports=TodoList以上是边肖介绍的React中的todo-list，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！