React实例1-实现删除操作

心已赠人 2022-12-13 00:44 184阅读 0赞

1.组件下标传递

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

  1. <ul>
  2.     { 
  3.       this.state.list.map((item, index) => { 
  4.           return <li onClick={ this.deleteItem.bind(this, index)} key={ index + item}>{ item}{ index}</li>
  5.        })
  6.     }
  7. </ul>

2.编写deleteItem方法删除数据

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

  1. deleteItem(index) { 
  2.   console.log(index)
  3.   let list = this.state.list
  4.   list.splice(index, 1)
  5.   this.setState({ 
  6.     list: list
  7.   })
  8. }

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

  1. //删除单项服务
  2. deleteItem(index){ 
  3.     this.state.list.splice(index,1)
  4.     this.setState({ 
  5.         list:this.state.list
  6.     }) 
  7. }

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

发表评论

表情：
评论列表 （有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读