本节将介绍列表循环时删除其中某项
需求是这样的:点击已经有的选项时,可以进行删除。
1. 数组下标的传递
需要删除其中某项,那么首先就要知道当前点击项的index
,也就是下标,然后绑定一个事件。代码如下:
// 省略部分代码
<ul>
{
this.state.list.map((item, index) => {
// 此处如果return后面只有一行的话就不需要写括号,如果需要换行就必须写括号
return (
<li
key = {index + item}
onClick = {this.delItem.bind(this, index)}
>
{item}
</li>
)
})
}
</ul>
此时delItem
方法还不存在,接下来,定义一个该方法。
2. 编写delItem
方法
该方法接收一个参数。那就是当前点击项的下标
delItem(index) {
console.log(index)
}
返回浏览器可以看到成功打印出该下标。
3. 实现删除数据
获得数据下标后,删除数据就很简单了。先声明一个局部变量。将原始的list
数组保存起来(之所以保存起来的原因下面会提到)。然后通过传递过来的index
,删除数组中对应的值。然后用setState
更新数据就好了。
// 删除item
delItem(index) {
let list = this.state.list
list.splice(index, 1)
this.setState({
list: list
})
}
之所以需要保存数据是因为React
会存在一个坑。因为React
是禁止直接操作state
的。这个坑在后期的性能优化上会有很多麻烦,所以一定要向上述代码一样操作。
以下为错误示范,请避免:
// 错误示范
delItem(index) {
this.state.splice(index, 1)
this.setState({
list: this.state.list
})
}