目标

写一个简单的todolist,完全由前端技术实现

  1. 有一个输入框，以供输入事物
  2. 一个提交框，把事件提交到列表里
  3. 列表展示，展示现有的事物
  4. 双击事物进行删除

ps.这里记录一些后面要解决的东西，先零散的记下来

  1. js中的e

实现方法

接下来使用react技术来实现todolist。
我们要用几种不同的方式来实现todolist

  1. react class组件完成
  2. react 函数式组件完成(使用hooks)
  3. 使用react+redux完成

用class组件完成

ps.代码在写完后一次性展示
首先我们需要分析一下，完成一个todolist需要什么。
image.png
可以看到，我们的待办事项分为上面的输入部分和下面的展示部分。
为了详细记录，这里一点一点写出每个过程的代码。
首先我们用react手脚架新建一个工程。
npx create-react-app classtodolist
//这里注意工程名不能包含大写字母
新建好工程之后，开始写我们的组件
这里我们可以把真个todolist分为两个组件来写

  1. 上面的输入框作为Input组件
  2. 下面显示部分作为Item组件

下面逐步进行实现。
首先我们需要有基本的界面。
由Input组件提供标题和输入框，提交按钮
然后需要Item组件来提供具体列表。
image.png
这样就完成了最初的界面设计，Item组件包含于Input组件当中，是Input组件的子组件。

接下来完成第一个功能：将输入框中输入的内容加到列表中去。

这就涉及了react中的组件传值，现在需要将父组件中的值传入到子组件中去。
react是由数据驱动的，我们在父组件创建一个数组list，用来保存输入的事件，然后再把数组传入子组件。子组件负责渲染。我们还需+++++++++++++++++++++++++++++++++++要创建一个inputValue来记录输入的值。
创建完成后，发现现在输入框中内容无法改变，这是因为我们为其设置了固定值，需要监听输入值改变，用一个方法来改变inputValue。
我们设计changeValue()方法来改变inputValue。
可以inputValue之后，就要将其存入数组list。
我们点击提交按钮进行储存，所以给提交按钮添加一个onclick()事件监听，执行addList()方法。
inputValue可以加入list之后，就需要把list值传给子组件，让子组件进行渲染。
传值完毕之后，成功渲染，插入列表功能就做完了。
接下来是第二个功能:单击事项进行删除。
删除事项其实是删除list中对应的项目。
因为react拥有单向数据流的特性，所以在子组件里是无法改变list的，需要在父组件写好处理函数，然后传给子组件，让子组件来进行处理。
完成删除之后，todolist的基本功能就实现了

用class形式实现的todolist代码地址：