最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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初期踩的比较深的一个坑,希望小伙伴们可以跳坑。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P10:React实例-宝剑虽好 可不要贪哦

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发