React 数据双向绑定之简易版Todolist

1.构建页面

通过map这个方法，遍历<li>标签，每当点击添加按钮时，便会通过存入数组中的index值来渲染出一个新的 <li>标签。

首先给input框一个onChange事件绑定，这样就可以获取到输入框里面的value值，当状态发生改变时，将执行changeInput，然后改变input中value的值。

 当点击添加这个按钮时，触发一个事件，将当前的input的value存入到list中，并将list中的值添加到<li>中，然后将input框中的 value清空。这里用到的是ES6写法，通过...来把当前value值添加进list这个数组中。

 删除操作，点击delete触发一个handleDelete事件，通过给span标签添加一个data-index一个属性，e.target.getAttribute（index）指定属性名的属性值，即这个方法可以获取到要删除li标签的下标的内容，重新定义一个list数组，与原list数组一样，再通过splice删除这个数组中应该删除的内容，最后this.setState来更新状态

页面如下所示：