00:00
好了各位咱们继续啊,说完了添加todo,哎,我们又说完了呢,对每一个todo的操作,那接下来呢,就剩下最下边这一块了,对吧?哎,底部的这一块来看看它有什么功能啊,首先呢,有这么一个勾选框,它的意思呢,是全选一勾选它上边的全都得选上是吧?那这个已完成呢,就是你有多少个打勾的,哎,多少个有已经完成的,那我这就展示多少个,你比如说这种情况,这应该是已完成三对吧,那全部呢,不多说了,应该是四对吧,一共有多少个,那这个按钮什么意思呀,你点完了这个按钮,所有完成的任务就都被删除掉了,因为人家的含义是清除已经完成的任务,对吧,一个一个来,我们先写这啊,因为这简单,先别写全选那一块啊,先写这,这比较简单,同学,那你说是不是这么回事,我只要把todoth全都交给福特,那么福特就能筛选出来你有多少个打勾的,对吧?其实同学所谓有多少个打勾的,就是看有多少个人。
01:00
它的当值为true对吗?好,哎,那来吧,咱写着,那打开components啊,然后呢,找到a PA papp里面得给福特多传一个东西对吧?同学,多传一个啥呀,Todo原来怎么给例子传,你就怎么给福特传,给福特传了对吧?传了你就得接呀,按住CTRL键,点击foot就来到了F特组件,那么你是不是应该在最上方就给它接好啊C诶,解构赋值等于this.pro哎,接住谁呢?Todos啊,获取到了,那接下来呢,同学,你根据todos就能够计算出来有多少个已经完成的,以及总数是多少对吧?好,写好注释,首先呢,先计算一下已完成的是多少,已完成的个数,那么还得再计算一下啊,叫做总数对吧?哎,总数好,已完成的,给它起这么一个名吧,啊,Cost已完成的。
02:00
我叫做down count,嗯,当时已经完成了,Count呢,是求和,对吧?一共完成了多少个啊?等于怎么写呢?同学你想想啊,我先往下写,因为总数简单cost total total呢,就是todos这个数组的长度LS是不是就可以了呀?来研究一下这儿吧,对吧,这个已完成的这个同学其实不是什么难事,你可以有N种实现方法,来我调一下同学,你看着你手里是不是握了这么一个数组啊?同学,你需要做的就是对数组进行条件统计,我再说一遍做条件统计,啥叫条件统计?如果您的当值为true,那我就统计一下加一,如果您的当值又出现错了,那我就再加一个一。也就是说白了,我想看看这个数组里边一共有多少个对象,它的当值为串对吗?好了。那咋做呀?同学,方法呢,有很多种,你可以写出最原始的那种代码,同学,你拿个for循环行不行,是不是也可以里边定义一个A,哎,只要发现当等于true,那就A加加是不是也可以啊?同学,那我说一下数组身上有一个方法叫做reduce,专门用于做统计的,哎,如果说你觉得这个方法很新鲜,同学,那你GS基础不过关呀,对吧?你的GS基础加上ES6可是有点不太过关,如果reduce你是从我的视频里边第一次听说,同学那你赶紧的用课下呀,赶紧去复习一下这个reduce OK啊,好,他能干嘛呢?对数组进行条件统计,条件求和,对吧?哎,筛选最值它都能做啊,在这儿呢,同学我们就不再展开讲了,因为reduce呢,它不是说一时半会就能全给大家过一遍呢,这个方法呢很有用,如果你忘了同学打开这网站叫MDN啊,MDN在这呢。
03:56
是吧,大家都知道这网站来点击一下走,哎,可能我这网速有点卡是吧,那我搜一下吧,MDN,哎哎,出来了哈,稍等,然后你在这个网站里边你去搜索,哎,你搜索什么呢?你就搜索这个reduce,就刚才我说的那个啊,Re reduce啊,那我这呢就不再展开了啊,不等它了,好了,那来吧,走着咋写呢?来啊,To是个数组对不对?哎,我要调用reduce reduce是不是得传一个回调啊,啊就跟你的map filter都是一样的,然后reduce啊同学调用的时候其实能传两个参数,第一个呢就是回调,第二个呢,就是你做统计的时候啊,那个初始值。
04:41
那刚开始肯定是零,对吗?然后呢,它在帮你调这个回调的时候,能传入两个参数,一个是pre re之前的值,一个是current,那这个pre是什么呢?P re是这个函数上一次的返回值,第一次调用的时候由于没有上一次,就以你传的这个零为主,第二次调用的时候就是这个函数第一次调用时候的返回值。OK,哎,Reduce方法必须要会啊。好了,同学,之前的给你了,当前的给你了,这个current是谁呢?说一下你对谁进行便利啊,是不是todos?所以说你拿到的current就是每一个一个一个的todo,所以说呢,我这不用current,当然了,官方文档里写的人家肯定叫做current,但是我在这儿为了能让大家明白,我就写todo OK啊,Pre呢,就是之前做统计的值,然后在这呢,需要你得返回一个值。
05:37
啊,也是得有返回值的啊,返回什么呢?P re加一,我这么写啥意思啊?简单说一下啊,虽然我们不用太大的篇幅去讲这个reduce,但是大概说一下啊同学,什么意思呢?你第一次调用这个函数的时候,由于没有上一次,所以说P传的是几啊零好了,你加个一同学,我问你零加一等于几是不是一,那是不是返回了这个一啊,你第二次再去调这个函数的时候,P re,你告诉我就变成几了一,因为刚才你把一返回了,那所以说就变成了一,然后再加上这是几啊一,那你就再写,哎,那就等于几了呢?二同学,那你觉不觉得整个这些东西都执行完了,其实你那个down count,你觉没觉得你就计算出了总数,你觉得呢?我给你输出一下这个down count啊,前边呢,给你加几个百分号,做个分格,走回到页面,我们去看同学刷新一下啊,走百分号是不是四啊对吧?哎,你看一共有几个呀,四个,但是同学你说我能。
06:37
来一个就加一,来一个就加一嘛,肯定不行,那到底加不加这个一呢?统不统计这一下子呢?同学你是不是得写判断呀?哎,也就是说在这儿呢,我给你来个小括号,代表它是一个整体,或者说这样来P加我把这一呢,给这来个小括号啥意思?你不能写死加一啊,你写死加一同学,那不就是求数组的长度吗?说那这怎么写呀,看着我问一下todo点当为真吗?
07:04
就是说这事你完成了吗?啊完成了呀,加一,那没完成呢,加零,诶这个统计就做好了,来我们看一下走刷新几个,是不是三个,哎,那你回到APP里边,你注意观察同学如果说。我让这个人也为false,那你说是不是就是两个完成的,两个没完成,那你看是吧二哎,所以说同学reduce方法一定得会啊,那这儿呢,其实还可以再精简一下,同学你说回调函数的函数体只有一句话吧啊,箭头函数的函数体咱得这么说对不对?哎,函数题只有一句,而且我还要做了一个默认return的动作,是不是可以省略划括号,你看看同学你这个基本功要不过关,写react其实挺痛苦是不是?哎,好了,那么已完成的计算完了,总数是不是也计算完了呀?那还想什么呀,把这零这走给它换成当count已完成的,那全部的这个二哎,也给它换一下叫做什么呢?Total是吧?哎,回头来看效果已完成两个全部四个,说老师这警告你刷新一下它就没了,那是刚才的警告啊,已完成两个全部几个四个OK,说老师那我现在勾选能行吗?当然行啊,你看啊打代码走已完成的是不。
08:21
三个,哎,这全部是不是四个啊,那如果我都给它去掉,OK,那是不是也行啊,已完成是零,全部是四个,勾选一个,嗯,就是对吧,哎,那就把这块呢给它完成了啊,那你别急啊同学有这么一个问题,你看着我勾选我勾选我勾选同学我问一下呀,现在是不是全都选上了。那你说你在上边一个一个一个一个给他们都勾选上,全选了,那你说这个东西是不是得亮一下啊,哎,所以说同学你说这个东西什么时候勾,什么时候不勾呢?如果已经完成的个数刚好等于了全部的个数,那代表你是不是都完成了呀,那所以说这个就得勾上去是吧?那好了,回到代码当中找到谁呀?就是这个人,哎,就是他来走这同学,那你说他到底勾不勾呢?我写个check k的,那不能写死,我得问对吧,你的down count是否真的等于总数,如果跟总数是相等的,OK。
09:17
啊,那么你就勾选对吧,那所以说问一下等吗?等呢就勾选,那要是不等呢,那就是false对吧?哎,好了,看一下效果啊走。同学啊,你先别看这警告啊,咱先看这儿,你看啊这些我都勾选上了,所以说这是勾上的啊,刷新一下看啊,一上来是不是两个完成,两个没有完成,所以说这勾了吗?没有来看着啊来打代码逛街值是不是相等了本你看是不是给你勾上了呀,同学这个东西又出现了,这个问题又出现了,我们读他说呀,你写了一个check这个属性,但是你写了这个属性之后呢,你却没有写unchang。哎,他认为说,那你这样写不就写死了吗?是吧?同学我们之前怎么处理这问题的来着,嗯,咱说你写了check k d,你就是把整个这个值就给写死了啊,你现在点一下我取消勾选,取消勾选,取消勾选你看取不了,为啥你写死了吧,你就告诉他拆K的必须得勾选,那不行啊,啊他那意思是什么呢?你还得写个unang,你得让这哥们能变,你得让这哥们能改是吧?那我们之前怎么处理这问题的来着,咱说呀,别用check的,咱用什么呢?哎,叫做defot check的,哎,那你看一下啊,我刷新一下走同学两个做完了,两个没做完,那这是不是不勾选来全都做完了。
10:39
那同学我问一下,这会儿正常是不是得勾上呀,但是你发现嗯,他居然没勾上,这是什么情况呀?来注意看一下同学啊,捋顺一下这事,刷新这我再多刷几次,页面可是新的哦,新的来借助开发者工具打开APP走,你看前两个做完了,后两个没做啊,来第三个做完了。
11:01
哎,第四个呢,做完了同学,按照正常来说,他是不是得被勾选上对吧,但是现在就勾不上,为啥呢?我说一下同学之前咱就聊过了这个at check。你就听这名defat check,它只在第一次起作用,也就是说整个页面,页面一上来为什么没勾选,因为刚开始的时候这两个值不等,对不对,这两个值是不等的,那同学不等能勾选吗?不等,所以说他就把defat check的这个值设置为了false,所以说你页面看的效果就是没有勾选,那等你有一天已经完成的和总数相等了。同学注意啊,相等了,相等了之后我问你它俩是不是得等啊,等了之后是不是得调为true啊,但是这个default check的只能指定一次,只能是第一次的时候它奏效以后再指定default check不好用,它只控制第一次,所以说同学你能在这写default check得吗?不能,你得写check k得,这回你再试一下啊,同学,刷新俩完成的,俩没有完成的,来看这走走是不是勾选你这取消一个来你看着走走,你但凡这个全部不等于已完成,是不是这就自动就没了,OK,但是他有这警告,警告啥意思呢?他的意思是行,你这么做可以对吧?只要他俩相等了,我就能帮你给他勾选上,而且最主要的是check d能指定多次,始终以你最后一次指定为主。
12:29
对吧,哎,但是你要这么写,他的意思是你看你这改不了了,兄弟,你看你看你看你这对吧,你改不了了,那怎么办呀,他告诉你了,你得写一个unchang,哎,Unchang啥意思呀,同学。就是这个东西进行勾选和取消勾选时候的毁掉,哎,那所以说同学你如果写check的,那在react里边你就必须得写on change,否则这东西就写死了,那来吧,在这写一个叫做on change,等于那这怎么写呀,this.handle同学,我勾选这个啥意思啊,是不是全选,所以说我就起一个名字叫做handle checkout啊checkout全选走定义这个函数箭头语句加箭头函数走,同学那这怎么写?
13:15
全选同学是全选呀,你说我需要知道说谁的ID是多少吗?有一个算一个,那个当值全得调为true对吗?所以说在这儿不用接到任何的参数,那你唯一需要做的就是找到APP还得辛苦它呀,对吧,咱说过状态在哪儿,那操作状态的方法就在哪,那所以说来吧,走定义一个,这叫什么呢?啊叫做checkout是吧,全选check啊哦啊checkout todo啊,等于走,那咋全选呀,同学第一步你说是不是还得是获取原来的todos呀?哎,Cost结构复值啊,Constant结构复制等于this.state读出todo好,然后怎么办呀,是不是加工啊,哎,加工数据,那怎么加工啊,那当然是to do.map是不是便利拿到的每。
14:16
一个呢,都是一个todo o BJ,呃,然后你需要做的就是re return,谁呢?看着我这么写啊,Return,点点点todo OB BJ啊,你要是就这么写,那就是白玩一圈,拿到这个对象,复制了一份,一模一样的又交出去了,那我的想法是这样,复制的同时我要改值,把它所有的档值都改为CH,这是不是就全选了呀?然后呢,是有返回值的,接到一个新的todo,对吧?那在这呢,最后进行一步叫做更新状态,好,那这怎么写呀,this.site state,走,把原来里边的todo改为我加工完的new todo,当然这忘了一个O是吧?哎,这写好了,走啊,写好注释,复制粘贴。
15:14
调一下checkout todo用于全选,你得把checkout todo交给谁啊同学,是不是得交给底部F特啊,等于这怎么写呀,This点啊,对吧,找到foot特,哎,同学你说这怎么办呀,this.pro.checkout todo是不是就可以了呀?哎,那这写好了叫做全选啊check box啊的回调啊,OK eck啊check box的回调,来吧,咱试试吧,是吧,回到这刷新一下啊,走警告是不是没了。哎,先看看原功能有没有受到影响啊,来勾选勾选是不是选上了同学,如果你写的没毛病的话啊,现在是不是就是我一点诶首先这样试试啊,我全给他们呀,取消勾选,那接下来呢,看着啊,我点击一下这个走同学有问题。
16:19
首先第一个问题是我这勾选了,确实是把全部的都选了,这是不是四,这是不是四,那我问一下为啥这些人他没有被勾上呢。为什么呀?我们借助开发者工具,我们去瞧一眼同学,不难发现,每一个人的当值是不是都被改为了戳,但是这儿呢?嗨,就是死活不动,为啥呀?啊,说一下同学记不记得当年你在写item的时候,哥们儿,你这用的是不是也是OT呀?那OT刚才已经说了,它是不是只是第一次的时候好用了,以后就不好用了,所以说来吧,别写dayot,写check对吧?好,来我们再看一下效果啊,刷新,我把吃饭睡觉都取消勾选来到这儿借助开发者工具同学,你这必须得借助开发者工具啊,要不你就捋不清了,你到底改没改状态啊,是状态没改导致它不勾选,还是说得fo的原因啊是吧,你这说不清了,来看呢,我全选123走同学咋样,是不是全变成错了,这是不是全都勾选了呀?好,还有一个问题,你能全选,那你说你再勾一下是不是就可以取消全选呀,你再点一下你发现不行,为什么呀?哎,因为刚才你在设计这个东西的时候,同学你是不是把这。
17:45
写死了叫做true,那你的意思就是checkout todo,就是只能全选而不能全取消,那所以说这也不太对,那咋办呢?这是不是最好传过来一个当值,就是你得告诉我你到底是全选还是全部选对吧?哎,那当值呢,我就给你放在这儿。
18:07
那他俩是不是就重名了呀?哎,变成一个,那同学我问一下checkout todo是不是得传一个当值啊,哎呦,那赶紧想想吧,回到item里边,哎,回到foot里边,对吧,这个啊,这个凹todo,那同学你觉不觉得这会你应该传一个东西,就是到底是全选还是全部选是吧?那我咋知道全选还是全部选呢,是不就看这个东西到底是打勾还是取消那个勾啊,那勾在哪啊?同学还记得吗?Event我给谁加的onch change input,那我想拿到谁,到底go还是不go input是不是可以借助event,所以说这咋写来着,记不记得了点。他给它点的对吗?哎,就能识别出来你到底是全勾还是全不勾对吧?而且这个值呢,它是一个部耳值,然后呢,你就把这个值传到这儿了,那到底是全选还是全部选,那么就听这儿的对不对?好了,那我们再来看一下啊,刷新现在是有完成的,也有没完成的,打开这块俩完成的俩没完成的来勾走是不是全选了,都变成串来取消勾选走是不是取消了呀?OK,这才是一个真正的逻辑是吧?哎,而且呢,你这里边啊可是有bug的啊,什么bug呢?你看一下啊,同学吃完饭睡觉打代码,同学这咋没勾呢。
19:28
啊,因为逛街我没勾,那我勾上,哎,相等了,这是不是就出来呀?好,那同学啊,考虑这么一个情况,来删除走来删除走来删除走来删除走,同学这咋还勾着呢,那你刚才写的不对了,那你说如果全部是零,已完成也是零,那它俩也算相等,那相等就勾,那所以说呢,你得写的再详细一点,找到F组件,那你说接下来我得咋办?你不能说来它俩相等了,那我就勾选,而且还得有条件它俩相等的同时这个总数啊,它还不能等于零,你说对吧,你总数要等于零,然后已完成的也是零,那咋的,那还勾那就不太合适了,来我们再试一下,你看现在就没有这问题了吧,刷新整体测试一下啊,现在有吃饭睡觉这些是吧,那来我先添加一个走,你必须得看看员功能受不受到影响啊,走是不是加进来了,打开第一个没完成,这俩完成了,后边那俩没完成,来勾勾勾是不是选上了,来全都没完成,走是吧?哎,就这么一个效果,而且当你都删下去的时候,最后再测试一下,走哎,走啊再走,然后呢,哎,再走是吧,哎,这会儿他也不进行勾选是不好了,刷新一下啊说老师那这就完成了,对的同学,你觉不觉得有一个坑在哪啊,就是关于check d和diat check的。
20:56
如果当时我要给大家这么讲,我说同学们呀,那你说是不是得用check呀?然后我带着你看一下控制台的警告,我说同学们,那你看是不是出警告了呀?告诉我干嘛呀,得写unchang,那我就写上吧,我就完美的避开了dayat check the这个问题,但是这个问题不能回避,得让你知道OK啊,简单记at check给the,只在第一次指定的时候有作用,以后就没作用了。好了,同学,加把劲来,这是啥意思呀?
21:25
清除所有已经完成的,对吗?来吧,找到这个按钮,加一个on click事件等于this.handle ha啊,Handle handle什么呢?C啊,Clear。啊,Clear or啥意思啊,清除所有啊,走或者你写的再完整一点也行,Clear all down所有已经完成的,不是说真的把所有的都删掉,定义这个函数,走清除所有已经完成的,好像这我也不用接到什么参数对不对?哎,我就告诉APP,你把那些所有down属性为戳的那些就都删掉吧,啊那所以说呢,走注释还是得写好的啊走这是什么呀?清除所有已完成的回调,把这个直接复制放在这里。
22:19
好嘞,走同学,只要你想更新状态,现在你没办法,你只能麻烦谁去,你只能麻烦谁去,是不是APP这是初始化状态啊,这是用于全选的,那还得再来一个叫做清除所有已经完成的对吧,Clear粒,然后呢,Done down就得了啊,或者说clear all down所有已经完成的,走啊走着,那这怎么写呀,可粒老当用于用于干嘛呀,清除所有已完成,清除所有已完成的好,那怎么清除呢?首先第一步肯定得是获取原来的图DOS对吧?哎,写着cost结构复制this star state来吧,谁呀,Todos啊,那接下来呢,是不是得。
23:20
过滤数据啊,啊,把所有当值为true的都给它干掉,那所以说todos点二数组上的方法是不是叫做filter,哎,走着拿到的每一个呢,都是一个todo OB BJ啊,那在这做什么事呢?过滤的条件是什么呀?把谁交出去吧,是不是得这么写,Written TODo.OBJ点当等于falsed是不是交出去,因为要清除那些已经完成的嘛,所以说匹配的条件是它等于false,那所以说你可以这么写,取个反,这就直接删掉是吧?那你就接到了一个新的数组,一个新的todos,哎,那接下来呢,最后一步是不是更新状态啊,不更新状态呢,怎么展示东西呢?this.set state,把原来的这个todo给它替换成。
24:15
New todo别急,得把clear all done传给谁啊,传给福特走,写上this点传过去,你传了这就得用对吧?那这怎么办呀?this.prop点这个一定要用,是不是就可以了呀?来吧,咱试试吧,现在吃饭和睡觉是完成的,点击清除已完成是不没了,诶全部变成两个,已完成变成零,那你勾一个呢,就变成一,你再勾一个呢?啊,它俩相等了,就勾选了,那我这儿呢,就全部选对吧?哎,那我再加一个呢,345走是不是也没问题啊哎,那写到这儿呢,我们就把todo啊这个案例呢就写完了,那要求就是啊,听视频的各位一定要自己从头开始整个的敲一遍,嗯,好了,那这一小节呢,我们先停一下。
我来说两句