react学习笔记03-使用react编写todolist功能

1、我们在index.js当中修改，把App改成Todolist（见图）。再编写一个TodoList.js（见图）。


2、我们在TodoList当中简单写一下提交框以及列表（见图）。注意在规则中render函数返回的最外层是一定需要有一个包裹元素的，但是我们有时候不想用一个元素包裹所有返回的内容，我们就可以用占位符Fragment，当然这也是需要引入的。

3、但是这个时候我们的网页还是静态页面，接下来我们给网页加上响应事件。在React设计当中，我们不需要直接操作DOM，而是我们去改变数据，React会感知到数据的变化，从而帮我们自动生成DOM。我们先做一个响应的小demo，我们在React当中定义数据inputvalue，让它与输入框当中的值绑定（见图）。解释一下：React的数据都是存放在构造函数的this.state当中的；在h5的标签当中如果我们要使用数据绑定，数据的两边要加上{}。

4、但是像我们上面这样进行数据绑定，input框里面就无法再输入了因为它的值被我们的数据绑定了，而我们的数据又是写死的不可变，因此input框中的内容也不可变了。我们修改一下代码（见图）。解释一下：当input框中的内容改变时，我们会调用我们自己生成的handleInputChange()函数，这里要使用bind(this)是因为在我们定义中的函数中的this指代不明确，我们的this需要指代的应该是这个类，所以我们在这里绑定一下；修改state当中的值必须通过setState这个方法。

5、接下来我们开始编写按钮事件，总的代码见图。第二个框中有一个循环，是针对于this.state.list的一个循环，每次追加一个<li/ >标签。第三个框中，list里有一个CS6的语法，…表示展开，也就是把之前的list中的内容展开，如图中这么写相当于在数组中追加this.state.inputValue这个元素。

6、再做一下完善工作。第一个是为了解决网页控制台的报warning问题，好像在map函数当中每一个li都需要一个自己的key值。第二个是为了点击提交按钮的时候把输入框中的内容清空。

7、接下来我们来做一个点击li标签，删除的功能。