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

1.构建页面

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

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

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

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

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

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

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

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

页面如下所示:

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