React实例 删除列表数据

React实例 删除列表数据

添加服务虽然很美妙，但是有时候也需要有些节制。这节课就学习如何删除一个服务选项。需求是这样的，当点击已经有的选项后，我们就进行删除。如果使用原生的js来写，这是非常麻烦的，但是有了React后就变的简单了。
数组下标的传递
如果要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就要有事件产生，先来绑定一个双击事件.代码如下:

数组下标的传递

如果要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就要有事件产生，先来绑定一个双击事件.代码如下:

<li key={index+item} onClick={this.deletItem.bind(this,index)}>
    {item}
</li>

为了看着更清晰，我们在return部分加了()这要就可以换行编写JSX代码了.在onClick我们绑定了deletItem方法.

deletItem方法

这时候可以预览一下啊,已经在方法里获取到了下标.

//删除单项服务
deletItem(index){
    console.log(index)
}

正式删除数据

获得了数据下标后,删除数据就变的容易起来.先声明一个局部变量,然后利用传递过来的下标,删除数组中的值.删除后用setState更新数据就可以了.

    //删除类祥  
    deletItem(index){
        console.log(index)
        let list = this.state.list //list数组
        list.splice(index,1)
        // this.state.list.splice(index,1)  //不能直接操作state中的值坑
        this.setState({
            list:list  //删除后的数据给 list数组赋值
        })
    }

其实这里边是有一个坑的,有的小伙伴肯定会认为下面的代码也是正确的.

    //删除类祥  
    deletItem(index){
        this.state.list.splice(index,1)  //不能直接操作state中的值坑
        this.setState({
            list:list  //删除后的数据给 list数组赋值
        })
    }

记住React是禁止直接操作state的,虽然上面的方法也管用,但是在后期的性能优化上会有很多麻烦,所以一定不要这样操作。

技术胖第一博客网站：https://jspang.com/detailed?id=46#toc220