00:00
好嘞,各位继续啊,那刚刚呢,对传递的这个pros呢,进行了类型以及必要性的限制,说老师这还有警告呢,那你刷新一下啊,好了,他就没了,那刚才咱不是演示了一个错误嘛,是吧?好嘞,接下来呢,我们再考虑每一个todo还能干嘛?除了勾选和取消勾选是不是还可以删除呢呀,对吧,同学啊,那来吧,同学,是不是给每一个todo那个删除按钮都绑定一个click事件呀,回到代码当中,关掉所有的人,找到item,找到结构,那来吧,这些写完的呢,给它折叠起来啊,来吧,目录我收起来走,删除按钮是不是在这儿呢?来一个on click事件,走this点,当然叫做handle。那那你说点这啥意思,是不是删除啊,Delete delete啊响应删除的这个回调走,那么在这注释给它拿过来删除一个突突的回调。
01:05
哎,好嘞,写吧,接下来怎么办呀。同学,你说删除的时候呢,就更简单了。你直接拿到现在操作这个todo的ID,然后告诉APP说呀,你把这个人删掉就可以了,所以说删除的时候同学们,我们只需要拿到ID即可,不用再拿别的了,那所以说这是不是得收到一个ID对吧?啊ID,那你说这我是不是得传一个ID啊,同学你刚才更新咋写的,是不是handle check,然后在这是不是传一个ID呀?那同学我不想总写成高阶的形式,换一种形式呗,又不是说只有高阶是吧,我这么写看大家能不能反应过来啊,怎么写呢?瞧着昂可Li是不是需要指定一个回调啊,那我就立刻在此刻就给你写一个回调,那同学你说啊。React在我发生点击的时候,帮我调的是不是这个函数,哎,那这个函数能收到什么呀?是不是?Even问,但是同学你觉不觉得好像目前我也不用这个了。
02:13
我需要拿到按钮的什么值吗?按钮也没有点value值啊,所以说这块根本不用,这个event我也不想接了,但这里边我做一件事,this.handle delete走调用传一个ID,你说我这么写,这是不是就不用写成高阶对吧?同学之前我在给大家讲的时候,我是不是写了一个不用高阶啊,或者说之前存的那个视频的名字可能叫不用颗粒化去实现,对不对,是不是就这么写的,你不要回调吗?我给你呀,对吧?然后这回调里边呢,哎,我自己去调这个handle delete对不对啊,那箭头函数函数体只有一句画括号是不是可以省略呀?哎,这不就结了吗?这是不是也能拿到ID对吧?哎,只要你点删除,我就输出你的ID来,我们试试,那或者前面加点东西叫做通知APP删除,然后后边呢,再把那ID1输出来,咱试试啊走刷新一下页面吃饭是吧,走你看通知删除001,那这呢通知删除002,对这不就解。
03:14
了吗?是吧,也不一定非得写成那个高阶函数啊,加那个颗粒化的形式是吧,这么写也行,就是稍微在这儿可能看起来麻烦一点是吧?哎,咱都用一用,同学,我们的目的不是说用最快的速度怼出来一个案例来,你看老师这么快给你写完了,是借助这个案例我们去讲解一些东西,知道吧?哎,各种方式都练一练好了,同学不磨叽了,你说这得怎么办呀?你是不是得联系APP把这人删掉啊,那所以说同学又是一样的套路,子组件想影响父组件里的状态,那就要求父亲当年要传递给item一个删除todo的方法,对不对,这是添加的,这是更新的,那还差一个啥,是不是删除的呀?啊,那定一个名字吧,名字叫什么呢?比如说叫做delete todo,诶,走对吧,删除一个todo,我不要别的,你只把ID给我是不是就行?哎,好了,走好写个注释,把它复制走did it todo。
04:17
用于不是更新删除一个图do来吧,试试删掉怎么删除啊,首先第一步还是得获取原来的todo cost结构赋值,从状态中啊读取这个DOS。好,第二步呢啊,同学想从数组里边啊删除指定ID的元素,那怎么做呢?啊,我先写着,我先写注释完,你想一想怎么做啊,删除指定ID的todo对象,同学是不是可以用数组里的过滤对吧?哎,Todos点数组身上是不是有个filter叫做过滤啊走,你拿到的每一个是不是都是一个todo o BJ啊,那同学过滤的条件是什么呀?
05:14
如果人家说了我想删除ID为002的那个,那所以说你过滤的条件就是你要把那些所有ID不为002的返回,002的不返回,那你说是不是就把它过滤掉了呢?那过滤掉是不是就删除了呢?哎,那所以说得写return吧,那return的条件是什么呀?判断的条件就是todo OBj.ID它不等于我传过来的ID,我就可以把它返回去,如果等于,那我就过滤掉,对吗?I cost,然后呢,是一个新的todos,同学啊,你也自测一下,如果在我写这些代码的时候呢,你有点小疑惑,哎呀,老师那啊这这是这个,哎,你如果要疑惑了,同学就从我讲todo这个案例一直到现在,我用的数组上的方法都是非常基础的,如果哪块啊,你觉得老师有点不太熟了,那赶紧去把GS基础再好好看看好吧,啊,那走最后一步,那就是更新状态,状态不更新,那你数据怎么驱动这页面的显示。
06:14
是吧,来,走this.set state把里边的news啊,哎,不是new todo啊,原来人家那边叫todoth,把它改成什么呢?我的new todo是吧?好同学,得把这删除的传给谁呀?你得传给list,但是啊,大家都知道传给list不是我的目的,List得接到,接到之后进而传给谁呢?是不是传给item,那所以说在这,哎别光说呀,接走是不是接到了,哎,那这块呢,是不是还得继续往下传呢?走哎这咋写delete todo,那你说你这呢,那你既然都写这个判断了,那是不是得来走一下啊,那这还得再来一个呗,叫做delete todo也是函数吧啊,也是B传项吧,哎,对。
07:02
好了,来啊,传给这个item了,叫做delete todo,这呢我多说一句啊,同学,这里边有一个小坑啊,可能听视频的各位啊,自己练习的时候容易出现这个问题,就有些同学哈,他没有定义成delete todo,他就管这方法叫delete。好好你看着啊,Delete,然后呢,那你这传的是不是得叫做delete,然后你这是不是得写delete。对吧,然后你回到list里边,那你说你这接的是不是就得是delete,但是呢,你发现你在这写的时候,同学你看你看他就不让你写它就是说不对,你加个DELETE2哎也行,DELETE3也行,就是不让你用delete,为什么呀?同学delete是一个关键字,用于删除某个对象里的指定属性,你比如说同学我有一个对象啊,Let一个OBJ等于,然后A呢是一完了,B呢是二,对吧,好,如果呢,你想删除那个A属性,你是不是得这么写呀,Delete,然后OBj.a对吧?我不知道你还记不记得了啊,你可以试一下来试一下来走demo.html,写好一些固定的结构啊,来走,写一段脚本,Let一个OBJ,然后呢,它等于AB呢是EB呢是二,我想删除,那就得写delete,然后呢是OBj.a然后你再输出这个OBJ,那你看一下那个A属性它就没了呗,回到这。
08:28
然后呢,刷新走是不是没了,哎,因为那个delete呢是一个关键字同学,哎所以说呀,你可千万别定义成delete,撤回来叫做delete todo,这也叫做delete todo,然后你传给list的时候,哎,Delete todo,哎标示好是吧,继续往下传,那就来到了it这里边。啊,那你可能说老师等等等等,你看这啊,老师list这不给item传了这么多的东西吗?这不都是pro吗?那你也没有对这个pros进行类型以及必要性的限制啊,那当然了,我没写,你写的话把那些代码粘过来,那不是一样的吗?对吧?哎,所以说啊,你到了工作岗位上啊,你会看到公司里边很多的代码程序员不写pro的限制,为什么呢?时间紧,任务重,可能他就来不及写了,是吧?啊好了,回到item里边来走。
09:17
回到这了吧,那你删除this点是吧,Post点来父亲传给我啥了蝶delete的todo,那在这咋的掉,说吧,是不是这ID啊,来咱试试吧,看看能不能删掉啊,回到页面中刷新一下啊,它有问题,那咱看一下吧,说呀,你的list index GS叉的第16行有语法错误,那咱看一下吧,怎么的了呢?来到index里边第16行,哎哟,这没改是吧?啊,应该叫做delete todo好了,那走回到这儿啊,刷新一下,那我想删除这个打代码这个来点击删除走是不是没了。啊,说老师那状态里的东西有没有删呀,那肯定删了呀,啊那你看一下嘛,走吃饭睡觉逛街,我把逛街也删了,来走看逛街是不是也没了,哎,但是你这么写有点不太好,那你说用户如果一个不小心点了删除不对吧,你想想咱们在做这个案例的时候,我带着你看那个最终的效果,同学,最起码你点一下删除,是不是给我弹个窗,问一下你确定删除吗?对吧?哎,那回来吧,那得怎么写呢?
10:24
你首先肯定得找到item,因为是item里的删除,你别说一点删除,直接就执行这句话,那你要直接执行肯定是吧,那就直接就是这效果,那所以说呢,你得判断一下,那咋判断呢?是吧,咋判断呢。同学,你用alert读的。啊,原生好像就有一个能让你点确定和取消的,你要用alert,那有意思了,同学你绑架用户呀,这ALERT1弹,同学alert是不是只有一个选项确定删除吗?只有一个确定按钮,那不行是吧?有这么一个东西叫做confirm,不知道大家还记不记得了confirm,哎,然后你问他一下啊,走叫做确定删除吗?是吧?那这个confirm呢,调用之后啊,它有一个返回值。
11:08
哎,如果你点了确定,那它返回的就是真,如果你点了取消,那么它返回的呢就是假,哎,那所以说这里边儿什么意思呢?就是提示的内容对吧?确定删除吗?如果你确定了再执行这句话,老师,那我不确定了,那就什么都不执行呗,好了,那我们试一下来回到这儿,但是在这儿呢,有一个小坑,同学你注意看啊,他说一个不被期待的使用confirm。这什么意思呀,他不认识这客啊,说老师那得怎么办呀?同学说一下啊,这就是一个小坑了,你得加上一个window点,告诉他是window身上的那个confirm啊,那这回呢,你看他就不报错了,来,我们试一下。点击删除答,代码问,你确定吗?如果我不确定,那就不删是吧,如果你确定了,哎,走那就删对吧,这是有一个小坑的啊同学你不写这个window呢,就导致他不认这个confirm了啊,他不让你去使用了,这会啊,一定要注意有这么一个小问题,OK,好,那这一小节呢,我们就讲完了,讲了什么呀,删除一个突突对不对?哎,好了,那这小节呢,停一下。
我来说两句