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
})
}
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!