本文介绍如何使用JavaScript通过遍历和事件绑定实现动态增删<li>元素的方法。具体包括利用input输入框的onChange事件获取值，点击按钮将值添加到<li>标签并展示在页面上，以及通过事件委托实现对指定项的删除。
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来更新状态
页面如下所示：
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
