00:00
继续来完成todo类的相关的功能。添加完成了。选中和不选中也完成了,那还有一个什么呢?这里属于删除,哎,这下我们写这个删除啊,删除其实更简单。删除的话呢,只需要我们得到这条数据的这个ID,然后把。这条数据诶移除掉就可以了,对吧,我们来想一想,那删除的话,首先要给他一个点击事件,就是在我点击这个删除按钮的时候,我要能。哎,获取一个这个ID,然后把这个ID。对应的这个数据给移除就可以了。开始写代码啊,首先看一下删除是在哪个组件里面。在这个list item。这里面是不是有一个删除按钮,我们给他一个点击事件。啊。Click。来这里面要接受一个回调。而且我们还要把ID这个参数传过去,看一下这个来清记这里怎么写的,是不是这样写的啊。
01:01
那我们换一种写法,因为你如果这样写的话,这个里面它需要一个回调,是不是我们还得给它一个,呃,回调函数作为事件的一个回调,那既然你这个事件你要一个回调,我直接把回调写到这里面,是不是也可以?对不对。也就是在我点击的时候,就会触发这个回调函数,那我在这个回调函数里面干什么,我在回调函数里面,我去调用哎函数,那调用什么函数呢。Handle,啊,Delete来处理这个删除的这么一个函数,把谁给传过去,把ID给传过去。对吧,那我们为什么换一种写法,就是让大家能知道,哎,我们不仅可以用这种,呃,高级函数这种写法还可以使用啊,直接在这个里面去写这个回调函数,然后在回调函数里面去执行这个我们自定义的这个函数,把这个函数写一下啊。注释写一下啊处理。
02:03
删除。处理删除todo啊。这个为什么我没有加这个回调我特意不加的啊,因为这个函数呢,就是我们在这个函数里面直接调用的。对吧,他不是作为这个事件的函毁掉了。这个事件的回调是外面这一层函数看到了吗?好。我们先打印一下这个ID,你看调用这个函数,我们传了一个ID过来,把这个ID来获取到来输出一下这个ID log。刷新来运行一下。打开我们的控制台。点删除是不是得到这个001这个ID了,002003ID能拿到了。拿到ID之后是不是就非常好办了,那这个子组件,哎,直接告诉这个,呃,APP这个组件,哎,给你个ID,你把这个ID的数据帮我删了是不是就可以了啊,来我们写一下啊,其实和呃更新的那个逻辑是很像的,就是我们选中的那个逻辑都很像的啊。
03:06
接着去写我们的app.gs因为这个艾特组件啊,它跟APP没有直接的关系,而是艾特姆是作为这个list的一个子组件。但是呢,现在是APP组件,诶,我们这个APP组件想要啊,给这个item去传一些东西啊,传个方法过去,让他能把数据给传给这个APP,哎,所以说我们跟这个,哎清理todo这个方法都是一样的,那我们再来定一个啊。删除。土豆。Delete。这个。只要一个ID就可以了啊。啊,我们先把这个写完之后,再想办法把这个哎函数给传过去啊。想一下啊,我们现在能得到这个ID,哎,假如我们得到这个ID,怎么去把对应的这个数据给删除掉,首先它是一个数组啊,数组呢有一个呃方法啊,就可以去筛选这个数据,我来写一下啊,那你首先要获取原始数据对不对,获取。
04:16
原始数据。土豆子。来获取到原始数据之后干什么呢?啊,这个就是筛选数据了啊。那怎么筛选呢?就是你符合我条件的,哎,都给我返回回来,那不符合的我就给你过滤的,那什么情况下是不符合的,就说这个ID是等于你刚好要筛选的那个数据,对吧,就ID跟你相等的是这这条数据是我要删除的,那你要删除的这条数据我认为你是不符合条件的,所以就给你过滤掉是吧,那过滤数组我们使用什么使用这个。有一个。
05:01
Fla,哎,这个就是筛选数据用的啊。里面接收一个回调。那回调接收一个参数里面,就是我们迭代的一条一条的这个数据清楚了吧,哎。来。接下来干什么呢?在这里面写判断条件,哎,注意啊,这个判断条件你可得小心了,它跟上面不一样,上面我们返回的是对象是不是这个筛选的话,它直接就是返回你判断的条件,也就是说你要。用什么条件来让这些数据,哎,允许通过来,我们把这个条件直接给。什么呢?TODo.ID不等于我传过来的这个ID。清楚了吧,我们这里返回的这个条件啊,它呢是返回所有通过这个测试的项目,也就是说只要你TODo.ID你不等于我传的这个ID,那么这些项目我就允许你通过,哎,放行清楚了吧,那只要你突do.id你等于我这个ID了,那我就不给你放行,直接给你pass掉,哎,最终只返回了这个通过测试的这个项目,哎,通过这些条件的这些项目,这是关于这个函数的一个用法啊。
06:13
那接着就是更新组件。状态更新状态this.set state。Todo,哎,等于我们的这个new todo。这个方法我们已经写完了,那是不是得把它用上对不对?这个方法是自然写的呢,在这个APP组件里面写的呢,最终想让谁去用,是让这个A去用,对不对。那。这个APP组件和item有没有关系?对吧,那怎么办?那你只能是APP,你先传给list是不是list,你再传给这个item。我们来写啊。在这里,哎,List我先把这个。Delete。
07:03
等于this点。To do。不要加这个括号啊,我们直接传方法啊。接着。APP组件,诶传给了list,那list是不是可以在这个prop里面就结构出来,哎,传过来的这个。Todo,哎,迭的todo,那接着他要继续往这个item里去传才可以啊。地雷的速度等于。Delete todo,注意这里不要加this啊,那这个delete todo是我们直接从这个purpose里面去结构出来的,尽量要注意啊,这样的话list又传给了item。Item里面就可以接收到这个来。在这里面啊,那我们既然能接收到,直接在这里调用this.purpose。第二哎,Delete todo调用这个方法,调用这个方法,这个方法它需要接收一个ID是吧,那我把这个ID传给你。好来保存一下啊,那我们来测试运行一下。
08:02
现在哎,我要把第一条给删掉,是不是删掉了啊。好,也可以去看一下这个状态,是不是真的从状态中给删掉了啊,那我先刷新一下啊。现在这里是不是有三条这个数据,那我把这个ID为002的给删掉啊。是不是没有了正向零一和零三,好,那我们的这个删除就写完了。再来看一下代码,给大家稍微总结一下啊,首先是这个删除按钮,它是在这个item里面,那我们要点这个按钮才进行删除,所以给他了一个点击事件对不对?点击事件呢,它要一个回调函数,那我们写了一个回调函数,只不过是直接写到这里面了是吧?在回调函数里面执行了这个函数,也就当我点击删除的时候会触发这个函数,那这个函数呢,我又传了一个ID给他。这个函数接收到这个ID之后,它调用了谁?Purpose里面接收到的这个啊,Delete todo啊,并且把ID继续传给这个方法,好,那这个方法是怎么来的呢?是list组件。
09:01
在这里通过这个属性传给他的是不是,但是list里面的这个地图哪来的呢?哎,是从这个purpose里面接收的,那既然是purpose说明啊,List的副组件也传的这个方法过来是吧?那list的副组件谁是APP,哎,最终我们就发现这个方法其实最开始是由APP这个组件传给这个list。清楚了吧,那这是为什么呢?这是因为诶,我们想要去改变APP里面保存的这些状态,保存的这些数据对吧,但是子组件你不可能说直接去操作这些数据吧,那子组件怎么办呢?只能是通过你父组件你给我的这个函数,哎,通过你父组件你给我的这个函数。我来进行。数据的一个处理,也就是说我子组件是通过这个函数把我要处理的这个数据来交给这个副组件,那在这个副组件里面呢?嗯,当然我是跨了一层副组件啊。当然是在这个,呃,附组件里面呢,就是我们状态所在的这个组件。我们就可以去接收到啊,子组件或者子子组件他们传过来的这个数据啊,那接收到这个数据之后,就可以根据我们的功能,比如说删除啊干什么的进行呃,一个数据的一个处理。
10:10
我们再来看一个事情啊,稍微提一下就是。这里我是不是给的delete todo对不对,如果哎你想省事,你给了一个delete,那你在这个list里面,你这里是不是要接受这个delete,可以看到啊,你你写这个delete就已经给你标上这个红线了。哎,说明肯定语法有问题,那你去这个里面,你看来去这个lo里面。不用去啊,这里面都直接给你报错了,那你c log里面肯定也会报错,是不是,这说明什么,你不能用这个delete是吧?那为什么不能用,因为delete是一个关键字,你不能把一个关键字你定义成一个变量,哎,我们这里其实是在定义这个变量,从这个purpose里面去解构出来的数据复制到这个变量上面嘛,对吧,那你delete是一个关键字,你不能把它给定义成一个啊这个变量啊。那做什么呢?它是可以去删除这个对象里面的一个属性的。清楚吧,好,这点一定要注意啊,那么把它还改回来啊,那这里还是用delete todo啊,这里还是传这个delete todo,哎,这里是一点,然后是这个list的组件,这里是不是我们对接收的类型进行了一个验证,对不对,那我们新加的这个把这个验证也给加上。
11:15
好吧,好,这个加上之后呢,呃,我们看这个item组件,其实在这个item组件呢,我们也接收了一些数据,但是也没有对它做一些验证啊,这个验证呢,如果大家想加给加一下就可以了啊。然后再来看一个什么事情呢。就是我们的这个例子对吧,你看诶一点删了,诶一点删了,万一我是诶不小心点到的呢,所以一般类似于删除啊,我们不是直接就这么做,哎直接让他一点就删掉,会给他一个弹框的一个提醒,哎,你确定要删除吗?如果你确定要删除,点到确定我再给你删掉,如果你点了取消,我就不给你删,对吧?那我们怎么写呢?那你能最想到最简单的就是window里面是不是有一个这个confirm。来,我们来写一下啊。在这里啊。有一个。对不对,他接收一个消息诶。
12:02
确定要删除吗?当执行到这里的时候,它就会弹出一个框,哎,确定要删除吗?如果确定的话。它会返回这个出和false,那如果你返回处就是你确定要删除了,我们再执行它是不是,如果你返回了这个呃,False,就是说点了取消返回了false,那就不走这个if就不去删除对不对?好我们来看一下啊。哎,已经报错了,他说是找不到这个东西对吧,那为什么找不着,我们之前应该写GS的时候用过它是不是,哎,这里要跟大家说一下啊。我们想一想它,它是谁的一个属项,是不是window对象的一个属项,对吧?那这里你能找到window对象吗?你是找不到window对象。所以我们那你既然找不到,那我直接给你指明,我直接给你加上。可以吧,哎,我就告诉你,我用的是window对象下面的这个方法,你看你还能不能找到,来再来试一下。好,刷新可以看到已经不报错了,那我这时候点删除,诶是不是确定要删除吗?那我点取消是不是没有任何反应,那如果点是确定是不是就没了啊,这点也是要大家注意的一点。
13:08
啊,删除功能这一小段我们就写完了。
我来说两句