00:00
鼠标的一入一出已经写好了,接下来继续完成我们的功能,那还写什么呢?写这个勾选和不勾选对吧?那你说哎,这个不是已经写完了吗?告诉你不是这样的,这个只是我们页面上看到的勾选和勾选,那真正的勾选和不勾选我们应该由谁来决定,由状态来决定,对不对,我们来打开。RA开发者工具。哎,看一下这个APP里面的这个数据啊,可以看到啊,这个当时处对吧,那我们这里如果把它取消,它应该变成false才对,哎,这里现在勾选和不勾选只是我们这个表单,我们看上去它的这么一个视觉效果,但实际上我们要改的谁改的状态里面的数据,因为只有状态里面的这个数据发生了改变,状态发生了改变,才能驱动的这个视图重新渲染。是吧,才能驱动的页面成渲染。也就是说,诶,当我选中的时候,它要发生改变,当我取消选中,它也要发生改变。那我是不是得给这个,呃,Input框一个事件。
01:00
当我这个事件触发的时候,我去更新这个状态里面的这个值就可以了,是不是这样的,来我们给这个引框添加事件。首先看一下这个隐框,它的这个类型是不是check box,那check box,哎,之前我们学习S都知道,你要去给他写这个事件的话,应该写什么事件,是不是写这个on change事件,就是当它的这个呃值发生变化的时候,就是选中和不选中的时候,它就会触发这个on change事件。清楚吧,咱们把这个函数写一下啊,第四点。憨啊,庆姐。来定一个这个函数。把注释写上。处理。选中和不选中。回家啊。我们来想一个问题来看这个,哎,我们现在有1233个对吧,那我点它,哎,或者我点它你怎么知道我们点了哪个,那我点的是第一个,你怎么知道点的第一个呢?那我点了这个你怎么知道呢?是不是我们还得传一个ID过去,对不对?当我操作的是ID为二的,哎,你就去把这个ID为二的给更改了,那我当我操作是ID为三的,你就把ID为三的去更改了,是不是我们需要一个?
02:19
ID这样一个参数,好来接着。修改一下我们的这个函数传一个ID啊,ID这里是不是已经从呃副组件传过来的这个属性里面,我们已经把这个ID给拿到了。对吧,所以可以直接使用这个ID,清楚了吧,就像我们使用呃,这个title和这个当一样,哎,我们可以直接使用这个ID,好吧,那你既然传给了他。是不是这里要接收这个ID,好跟之前我们绑定那个鼠标一入一出的是一样的啊,那这个on change它要接收什么,我们要给他一个回调函数对吧?那这个函数你加括号,它执行了,它的执行结果我们有吗?没有吧,是不是一样,我们要用高级的形式给它一个函数才可以。
03:03
That。一个高阶函数。来,在这里面我啥也不干,我先说说ID,看一下我们的ID有没有拿到,好吧。001是不是拿到了啊,这个我先不管啊。是不是男的了,002。003,哎,ID拿到了啊,那接下来我们还要干什么,是不是你还要获取到这个input框的一个状态,它现在是,哎,勾选了呀,还是没勾选呀,对不对,那input框的这个状态怎么拿。是不是可以从这个事件里面啊。去哪?那世界里面的什么是value吗?我们先试一下啊。target.value哎,因为触发这个事件和我们要取值的这个节点是同一个,所以直接可以从事件里面去拿,是不是来,但是我们拿VALUE6我们来看一下啊。
04:06
刷新啊。现在。我来点第一个是不是001啊,来点第二个002啊,那为什么都是on呢?因为这个类型你注意啊,这个是check box类型,你如果拿Y6的话,你是。拿不到他的这个状态呢,我们通过什么属性,通过它的check的属性啊,就是否选中,应该通过这个属性,他才会给我们啊,返回我们这个啊check一个box,它是选中还是没有选中是这个属性啊,接下来我们再看一看。先刷我把它先清空一下啊呃,现在它是选中的,是不是我给它取消,取消了是不是变first了,好,他现在没有选中,我现在把它选中002是不是变成出了,哎,那说明这个属性是可以用的对不对?好一个ID,一个我们要改变的状态,这些要准备的数据我们都准备好了。接下来我们来想一个问题啊。
05:01
现在哎,我勾选和不勾选,我这个值是能拿到,但是我刚拿到值,值没有用,我要去改谁,我要去改这个,呃,APP里面这里的这个状态,对吧,改APP里面的一个状态,但是我们来想一想看看这个结构。你最外层。这里是不是这个APP对吧,那你这里是不是这个list。是不是,而我们这个勾选和不勾选是在谁,是在这个里面item里面。那这个item和这个APP是什么关系啊,是不是你看。它是它的子组件,它是它的子组件和APP,是不是这个,呃,形成了这个子孙组件。啊,我把那个写一写啊,APP这是我们的APP组件,这是我们的历史的组件,是不是这是这个item组件。对不对,现在我们是要在艾特里面去,哎操作了这个数据之后,要影响到是影响到这个他的这个,哎已经不是副组件了,是它的副组件的副组件里面的这个状态的一个改变。
06:01
好,回想一下之前我们在这里写这个添加的时候。是不是我们APP给他传了一个函数,哎,你添加后,你这个数据,你通过这个函数参数,你你传给我,你这成函数传给我,我在这个APP里面做这个更改,是不是这样的那。我们这样又跨了一层,是不是也可以呢?哎,我说大家可以的啊,那你怎么办?APP你先给list的一个方个形,嗯,我换个颜色啊。来,换个这颜色。这个粉色吧,你APP你先给谁呢?给list你传一个function可不可以好,你list可不可以继续把这个function传给item。对吧,那你在这个item里面。我们是不是就可以,哎,执行这个三个险。然后把我们要传的这个数据,哎,就是我们勾选和我们勾选呀,还以及要操作这个ID,哎,我们要传的这个数据是不是执行这个函数就可以传过去,那执行这个函数,这个函数是谁传过来的,是不是一直由APP传给list list传给at的,其实这个函数是属于谁的,是属于APP的,对吧,那我们执行这个函数。
07:04
是不是就可以把数据给传给这个APP组件了,那我们在APP组件去改这个指定ID的,哎,指定它的这个,但因为我们可以传两个数据啊,你可以传一个就可传两个,我们把ID和你要哎操作的这个啊,但是否完成都传过去可以吧,这个流程大家明白了吧。回想一下之前我们添加的时候,是直接APP给海点传了一个函数,对吧,那那个海ER里面执行这个函数,把这个数据给哎回传过去,然后这里呢,只不过又跨了一层,那你跨了一层你就再传一层呗,把这个图搞明白之后,下面我们开始来写代码诶。来,那首先你肯定得在这个app.gs里面去定义一个函数啊。选中和。不选中。庆姐。哎,改变todo。
08:02
我们说了他是不是要接收两个,哎,接收一个ID,还接收一个单对吧。那在接收到这个数据之后要干什么,又找到指定ID的,你要把它这个状态给改了,是不是这样的?来分析一下这个数据,哎,它是不是一个数组对吧?我们这里能拿到这个ID,也就是说我们要把它数组里面的ID等于这个它的哎,它的这个值给改掉对不对?好,那既然是数组的话,其实大家想想吧,你最笨的方法无非是你哎便离这个数组判断,如果ID等于我传的这个ID,然后我把它的这个呃单给修改成啊你这个传过来这个单是这样的,哎,但是我们可以用数组的一些方法呀,对吧,无非是对这个数组的这个数据进行一个加工嘛,你编利当然是可以,但是我们可以用呃数组提供这些方法是不是好?接着写我们的第一步,你既然你要去操作这些数据,你是不是先要获取到这些数据,哎。获取。原始的一些数据啊。
09:02
土do。直接结构从。累死掉。推特里面,哎,结构出来出数子,接下来是不是要加工它对吧,我们想想加工数组的一个函数是不是有一个点map。对不对。他接收一个什么,接收一个todo。对吧,他接收一个数组的一个项嘛。接受这一条的一个图,Do是不是这样的好。接下来诶,这里我们可以处理后的一个数据,对吧,而且它最终会返回一个新的一个数组。啊。这里我们写下注释啊处理。重新吧,重新处理这个数据。处理加工数据来。是不是要用一个新的来接受它,用todo?
10:04
因为它处理之后啊,它会返回一个新的一个数组啊,接下来就看看我们怎么处理了,哎,就按刚才我们说的啊,就说你这个ID。就是你这个当前迭代的这个I,如果等于我传的这个ID,那我就要处理你了,怎么处理,你把你的这个单给改掉,是不是这样的,也就是说if。Todo,哎,第2ID等等于谁?等等于你传过来的这个ID,哎,是同一条数据了,我要干什么,我要给你啊,哎,注意它的这个,呃,回调函数啊,你要。就是说return的这个数据,就是我们更改之后数数据谁,你如果直接return这个todo,那不是没有做任何更改吗?那你传过来的是啥?你还把把这个原数据给返回的,是不是没做任何更改对吧,我们是要把它。里面的这个当给改掉。清楚吧,啊,那怎么改来,我先写上,大家看能不能看得明白,诶,然后我把它的这个单等于谁等于你传过来这个单。
11:05
看。是不是我来?呃,用展开运算符展开它,然后呢。把这个蛋,然后改成你的这个蛋,回想一下GS里面的。展开月符,如果放到这个大括号里面,哎,去展开一个对象,是不是在克隆一个对象对吧,那你克隆的对象的一个同时是不是可以去重写它的一些属性。啊,之前我们做过复习,如果忘了我们来搜索一下啊,你搜索这个点点点。来找到我们之前复习的这个文件零三展出运算符,好,那这里这里是不是我们定义了一个对象对吧?那你说通过这个点点点是不是可以克隆一个对象对不对?你克隆一个对象,这里又说了,你在克隆一个对象的时候,你可以去对它的属性进行一个更改,如果有同属性的就会改成你这个新的这个是不是如果没有的会额外增加。是吧?这个能搞明白吗?那我们这里是不是有这个单这个属性对不对。来这里就是克隆一下这个,然后把它的这个档给改成我们传入的这个档,哎把它原来的档改一下,最后瑞return就可以了,这个就是我们处理后的一个数据,哎,只有当你这个ID,哎,你要操作这个ID,等于我这个数字里面的某个ID的时候才处理,这样的话,其他数据不用不受影响,对不对?那不受影响的数据怎么办?你是不是也得返回?
12:21
清楚了吧,那直接就返回,哎,原本的这个就可以了。是不是这样的啊好,如果代码你这么写的话,你感觉比较长,可以精简一下啊,也就是说无非是你这边一判断完,你直接把它返回就可以了,对吧,那你这里。这么写就行了吗?这样精简一下是吧,你看因为你走这个第一个if的话,直接就把它清掉,下面是不走了是吧,如果你第一个if不走,是不是直接就走这里了啊,这样稍微精简一下代码,好,这样数据我们处理好了,那你光处理好了你数据你不用也不行啊,是不是要去更新一下状态啊,更新状态啊。怎么更新状态Z4。
13:06
把这个,呃,原本的这个原来的这个todos改成什么呢?改成这个我们新处理后的这个to。是不是这样的,哎,这个选中和不选中我们就处理完了,但是我们来想一下,哎,刚才我们的这个问题,我们的这个方法是定义在谁里面,APP里面。对吧,但是这个两个参数要谁传过来,是不是这个item。清楚了吧,啊是在item没有传过来,那怎么办?Item他是谁?你看这个艾和这个item没有关系啊。是吧,那item又和谁有关系,Item是和list有关系,Item是不是在这个啊list里面。去使用了啊,所以我我们可以怎么办,我把它们三个放一起啊,所以我可以你看我f.GS我把这个方法我传给list,哎,List里面你是不是可以就用这个purpose给接收到,那我接收到以后,我从这里面我再传给你item item是不是也能用purpose接收到,哎,那因为我们它是一个这个子孙的关系,我们只能是先传给你父亲,你父亲再传给你。
14:10
清楚了吧,来,接下来我们再给这个历史再写一个,哎,写一个谁呢。庆姐。Todo啊。历史点。进忌出动。不能加括号啊,直接传方法,你查加括号你就执行了嘛,是吧。好,传了一个沁气突突到这个list里面,List里面。是不是可以,哎接收到这个清理todo对吧,那你接收到这个清理突突,你list你又不用谁要用item要用那你继续往下来给item吗。氢气度等于谁等于氢气图度啊,直接等于这个氢气图度清楚了吧。好,这样的话,清理突突,这个清理突突啊,就传到这item item里面。他是不是就可以去执行,从里面去拿到这个。
15:02
接收过来的这个方法去执行,对吧,那执行的时候我是不是可以把ID传给你,也是也把这个选中的这个值传给你。明白了吧?嗯,再来捋一遍啊,这个方法是定义在谁上面的app.gs里面的啊,那我这个方法我最终是谁要想要使用是item要使用,对吧,其实我们最终的目的是要把item里面的数据传给这个f.GS但是你你没法直接去操作这个f.GS你只能哎通过这个f.GS。我先把一个方法给到list list再给给这个item item拿到这个方法之后去执行这个方法,因为这个方法是定义在这个f.GS里面的,所以说我在执行的方法之后,是不是可以传一些参数过去,那我既然执行了这个方法,并且传到这个参数,那f.GS里面是不是就可以接收到这个参数,接收了这个参数,哎,这个函数被执行了,是不是可以执行这些东西?好。我们先看一下效果啊。来刷新。
16:02
把这个状态我们来展开啊,首先这些是true false,我们来改,第一个,第一个我如果把它取消。报错了啊,找不到这个啊state啊,这里28行,那这个写错了吗?明显写错了,哎,当时写的快了啊,那是谁。是这样的,好,接着回过头来再来刷新。刷新完了啊,我们把那个展开看一下,它现在出选中对不对,我现在把它取消。是不是变成false了对吧,那组件的这个状态是不是发生了改变,来这个是false,你看false是吧,第二个002这个,那我把它给勾选。这里它是不是变成了数?来这个我们取消。变成了副词对吧,那这个功能我们就写完了。接着来看一个事情,我们来看一下什么呢?你会发现啊。哎,我们添加todo的方法在这个app.gs里面。选中和不选中这个方法也在这个APPGS,也就是APP组件里面。
17:01
对吧,那为什么都要放在里面,因为这些方法要改谁要改这个状态,要改这个APP的状态。是不是因为状态在这个f.GS里面,所以我们这些方法也在这里面,因为你只有方法也在这里面,你才能操作自己的一个状态嘛。是这样的,所以我们可以总结出来一条什么规律?来状态。在哪里?那操作。或者说更新啊。更新状态的方法就在哪里,是不是这样的?对吧,那因为我们状态是在这个APP组件里,所以我们这些,哎,操作这个状态的这些方法都写到这个APP组件里。哎,如果你其他组件要用,我可以传给你这些方法。选中和不选中,诶这里就写完了啊,我们再来看一下,刷新一下。就说啊,你不要看着说,哎,你这个输入引input的框,你这里是改变了对吧,你看这里也选中了,这里就不选中了,哎这样是不行的,你一定要看这个组件的这个状态,哎,只有当这个组件的这个状态你去操作了这里,然后组件的状态发生了改变,那这个功能才是真正的写完了。
我来说两句