从零开始学习React——(八)：React列表循环删除某项以及参数传递

本节将介绍列表循环时删除其中某项

需求是这样的：点击已经有的选项时，可以进行删除。

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
		})
	}