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来更新状态
页面如下所示:
以上是 React 数据双向绑定之简易版Todolist 的全部内容, 来源链接: utcz.com/z/384438.html