P10:React实例-宝剑虽好 可不要贪哦
目录
添加服务虽然很美好,但是有时候也需要有些节制。本文就学习如何删除一个服务选项。需求是这样的,当点击已经有的选项后,我们就进行删除。如果使用原生的 js 来写,这是非常麻烦的,但是有了React
后就变的简单了。
数组下标的传递
如果要删除一个东西,就要得到数组里的一个编号,这里指下标。传递下标就要有事件产生,先来绑定一个双击事件,代码如下:
<ul> { this.state.list.map((item,index)=>{ return ( <li key={index+item} onClick={this.deleteItem.bind(this,index)} > {item} </li> ) }) } </ul>
为了看着更清晰,我们在return
部分加了()
这要就可以换行编写JSX
代码了,在onClick
我们绑定了deleteItem
方法。
编写 deleteItem 方法
绑定做好了,现在需要把deleteItem
,在代码的最下方,加入下面的代码。方法接受一个参数index
:
//删除单项服务 deleteItem(index){ console.log(index) }
这时候可以预览一下啊,已经在方法里获取到了下标。
正式删除数据
获得了数据下标后,删除数据就变的容易起来。先声明一个局部变量,然后利用传递过来的下标,删除数组中的值,删除后用setState
更新数据就可以了。代码如下
//删除单项服务 deleteItem(index){ let list = this.state.list list.splice(index,1) this.setState({ list:list }) }
GIF 效果如下:
其实这里边是有一个坑的,有的小伙伴肯定会认为下面的代码也是正确的。
//删除单项服务 deleteItem(index){ this.state.list.splice(index,1) this.setState({ list:this.state.list }) }
记住 React 是禁止直接操作state
的,虽然上面的方法也管用,但是在后期的性能优化上会有很多麻烦,所以一定不要这样操作。这也算是我React
初期踩的比较深的一个坑,希望小伙伴们可以跳坑。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P10:React实例-宝剑虽好 可不要贪哦
码云笔记 » P10:React实例-宝剑虽好 可不要贪哦