代码:
handleItemClick(index){
const list = [...this.state.list]; // step2
list.splice(index,1) // step3
this.setState({
list:list
}) // step4
}
render(){
return(
<div>
...
<ul>
{this.state.list.map((item, index) => {
return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li> // step1
})
}
</ul>
</div>
)
}
step1: 对列表项进行事件绑定,点击列表项后触发onClick事件,将被点击的item的下标index传入handleItemClick方法
step2: 通过展开运算符获得this.state.list里面的数据,拷贝一份给副本list
step3: list.splice(index,1), 删除指定位置的项目,被删项目数是1
step4: 将this.state.list替换成新的被删除后的list, 更新状态