React实例1-实现删除操作

1.组件下标传递

传递下标就要有事件产生，先来绑定一个双击事件。我们在li标签上绑定一个onClick事件，执行删除操作。

<ul> { this.state.list.map((item, index) => { return <li onClick={this.deleteItem.bind(this, index)} key={index + item}>{item}{index}</li> }) } </ul>

2.编写deleteItem方法删除数据

编写deleteItem方法，并传递index参数

deleteItem(index) { console.log(index) let list = this.state.list list.splice(index, 1) this.setState({ list: list }) }

在这里，我们需要注意的坑，React是禁止直接操作state，因为在后期的性能优化上带来很多麻烦。如一下操作，是错误的。

//删除单项服务 deleteItem(index){ this.state.list.splice(index,1) this.setState({ list:this.state.list }) }

个人博客：Karma’s Blog 源码地址：传送门