react实现todoList待做事项管理

先放一张完成效果图： 

---

首先说明todoList项目实现的功能 :

1. 输入框添加待办事项，点击“添加”按钮将输入框内容添加到“待完成事项”列表中；
2. 在“待完成事项”中，点击右侧的“Done”按钮，该事件被移除，并添加到已完成列表中。

 项目技术栈：

react组件+react-app开发，数据管理使用props和state，之后会单独讲解redux管理数据的todoList版本。

下面开始进入开发~~~

---

• 创建react项目

在某一文件夹下shift+打开命令窗口或者git Bash here：

新建react项目：  npx creact-react-app todolist

打开项目：     cd todolist

启动项目：     npm start

项目创建完成。

• 项目目录

 

我们需要开发的子组件有三个：Add组件（添加事项），Todo组件（待完成事项），Done组件（已完成事项）。

App.js为父组件，作为index.js入口文件的组件直接渲染到页面中。

• 组件开发

1. App组件

 

 

 

由于待办事项和已完成事项共用一套数据列表list，因此数据放在父组件由state对象来管理，通过props与子组件进行数据通信。

同时定义方法add()和finish()