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
源码地址：传送门