基于react的class组件以及组件化思想实现一个todolist【二】前情提要前面已经讲过如何搭建整个项目的结构，

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

前情提要

前面已经讲过如何搭建整个项目的结构，已经注意的相关事项。那么这篇将开始着重讲一下如何具体编写代码。

过程：现在我们就开始编写todolist组件

首先我们在文件头部引入之前创建的是三个子组件。
- 注意：import React,{Component} from 'react'
- 这段必须引入，否则无法执行。以及Component首字母必须大写。
- 之后通过：export default class Todolist extends Component{}语句来注册Todolist组件。
- 并且在这个花括号里写一个render函数，并return一个dom结构，相信到这一步页面应该就不报错了。
- 在之后我们写一个section标签来做为第一层级。记住一个return里必须有第一层级且是唯一的。之后在这个层级里想怎么创建都可以。
- 然后我们用最开始导入todolist组件的方式进行引用我们之前分析并创建的三个组件。
此时我们再来到components文件夹的Header组件。如图：
按照我们之前讲的注册组件的方式进行该组件的创建。并且根据页面分析dom结构，便有了红框中的dom结构。红框中是一个dive包裹着一个span标签和一个input标签。span标签主要是用来显示标题的，input标签是用来输入待办事项的。
其对应的css文件如图：（关于css暂时不多讲，等讲到css的时候再来拿这个作为例子讲解。）
然后是要做的事的列表组件，也就是todo组件：
由于需要引入外部图片作为那个关闭图标，但是在react里引入图标只能通过require或者import的方式导入。所以i标签的样式就通过内联样式的方式进行编写。
todo组件的css文件内容为：
然后就是最后一个组件，做完的事，finshed组件。如图：
css文件为：
到这，整个页面的构建也就完成了。下面便是逻辑的编写。

逻辑编写

首先，我们要实现的逻辑是，在顶部输入框中输入文字，然后按回车确认添加该事件到要做的事的列表里。
在要做的事的列表里，如果事情的文字比较长，可以通过鼠标悬停来查看事情的所有问题。然后点击左边的复选框则视为该事件已经完成，此时该事件进入到做完的列表中。如果点击右边的叉号，则视为删除该事件，直接从列表中删除。
而在完成的事的列表里，点击复选框则视为重新打开该事件，该事件从完成是的事的列表进入到要做的事的列表里。如果点击右边的叉号，则视为删除该事件，直接从列表中删除。

根据页面分析。我们可以将数据结构设置为两个数组，每条数据设置为一个对象：

todoList = [
  {
     id: '',/*这个地方暂时值为时间戳*/\
     content: '第一件要做的事',\
     isFinshed: false， /* 这是标识是否已完成 */\
  }
]
finshed= [
  {
      id: '',/*这个地方暂时值为时间戳*/\
      content: '第一件要做的事',\
      isFinshed: true， /* 这是标识是否已完成 */\
  }
]

之后，会在todolist.js中进行初始化，检测localStorage中是否有这两个数组，如果没有，则进行创建,有的话则进行赋值。如图：
- 图中的UNSAFE_componentWillMount是react生命周期中的一个，会在render函数执行之前执行，所以在这个函数里进行初始化最合适。
- constructor是组件的构造函数，props是父组件传的值，super（props）指的是从父组件继承这些值。
- 红框中的localstorage是h5中的本地持久化api，其中setItem方法是进行存数据，getItem是进行取数据。
- 由于react是单向数据流，状态中的值想要改变只能通过this.setState()方法来进行修改。
- 所以，图中便是从本地进行存储数据，然后赋值给状态中的两个数组。

添加事件

添加事件的逻辑是，在输入框输入值，然后全局监听键盘的按下事件，如果监听到回车键的按下，则取出输入框的值，然后遍历两个数组并进行值的比对，如果在要做的事的数组中有匹配的则弹窗进行提示，该事件已经创建，不可重复创建。如果做完的事的数组里有匹配的值，则直接移出做完的事的数组，存入要做的事的数组。如果都没有，则进行创建新的要做的事。
代码： 640 (19).png

其中1：是在dom未render之前进行全局绑定键盘事件监听。第一个参数是事件名称，第二个参数是要调用的函数。即第二个红框。
第二个红框的逻辑是如果输入框为空，则返回空，停止下面的语句执行。如果是回车键，则调用父组件也就是todolist组件传过来的回调函数，并把值传过去。于此同时把当前的输入框的值赋值为空。
第三个红框是input的change事件，当输入框中的值发生改变时便会调用该函数，进入把当前的值赋值给state中的content，进行实时获取数据。
第四个红框是ref，通过ref进行获取input的值。
第五个红框是change事件进行函数的绑定。
第六个红框是input值的回显。

要做的事

要做的事一共有两个事件，一个是选择已完成的事，一个是删除事件。逻辑是当复选框的值发生改变后便会通过forEach高阶函数进行遍历比对content值，如果有相同的，则获取其在数组中的坐标，再通过splice方法将该条待办事项从todolist数组中删除，最后通过数组的push方法把这条事项存进已完成的事的数组里。最后再统一存到localStorage里。
代码： 640 (20).png

第一个框分别是关闭图标所绑定的事件函数，执行逻辑是调用父组件传过来的函数，并把值赋值过去。
第二个便是循环渲染父组件穿过的数组。
循环逻辑必须用一对花括号包裹。然后是循环逻辑。

做完的事

做完的事同样有两个事件，一个是删除，一个是重新打开事项，即将已完成事件的状态变成待办事项。逻辑与要做的事基本相同，这里不做过多的解释，只贴代码。
代码： 640 (21).png

父组件

父组件即todolist组件
- 代码：
  - 添加事件的回调函数
  - 完成事件和重新打开事件的回调函数
  - 删除事件的回调函数
  - 父组件向子组件传值和传方法

总结

至此一个基于react的组件化且使用class组件的项目就完成了。