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