00:00
好了各位啊,咱继续加上了这个鼠标啊,这个移入的这个效果之后呢,我们再分析一下它里边的交互,同学吃饭这件事儿目前是不是完成了,那如果说诶我想给他取消勾选,是不是可以这样说,老师这不就已经实现了吗?你看这完成了,这未完成同学页面上的显示,那是页面的,主要是看状态里的东西对没对哈,来看一下同学我刷新一下啊走,吃饭睡觉和逛街这三件事是完成的对不对?来看一下吃饭啊,吃饭睡觉逛街是完成的对不?哎,那如果说同学注意看啊,我把吃饭取消勾选,那这块最起码得变成false,你觉得呢是吧?哎,所以说你看状态东西是不变的,说老师不变就不变呗,哎呦喂,同学你说如果这四件事我都做完了,是不是都算做完了呀,那如果说我想点击这按钮呢,清除所有已经完成的呢。那你看啊,你就会出问题,你会把前两个和最后一个能给它清掉,因为他们确实完成了,但是你觉不觉得这标识没变过来呀,哎,所以说咱接下来做的是勾选和取消勾选某一个todo啊,那来吧,同学还得找到谁呀,Item,那同学勾选那个勾选框,哎,就是这个input来吧,我们写上叫做什么呢?说老师叫on勾选不是勾选和取消勾选同学是不是一种变化,而且本质上它是不是一个input框啊,那所以说同学不是别的事件,之前你见过叫做unchang,哎,Unchang等于this点我给它起个名字handle check check是不是勾选呀?哎,Handle check呢,就是check的时候的那个回调,走呃,给这儿呢,给大家写上注释吧,走标识。
01:59
鼠标移入啊,这个是移出好,那这个呢是鼠标移路移出的回调,那这个呢,勾选或者是取消勾选某一个todo的回调,来吧,走着,那同学你说如果我想勾选一个todo的话,你比如说答代码这事儿呢,目前是没完成的,但是如果我完成了,是不是得勾选一下,那这是不是得变一下,同学,那你说是不是得拿到打代码这个todo的ID,然后通知APP说你把ID为003的那个人的状态调为出,代表这个事儿干完了,对吧?所以说同学们,当我勾选和取消勾选的时候,我必须要拿到的一个东西应。
02:59
该就是ID是吧,那还得拿到什么呢?还得拿到这个,就是你到底是取消勾选还是勾选,也就是说你到底是选中还是取消选中对吗?来一个一个来,同学我这儿可不可以这么写呢?Handle check,我直接传一个ID过去。
03:20
但你这么写肯定会报错,因为你根本就没有定义过这个ID,同学想象一下,当时你拿到内幕是不是做展示,拿到down是不是决定那个东西勾不勾选,那当年其实咱是写过ID的,但是说ID没用,后来咱就删了,那现在是不是有用了呀?哎,那传进来,同学你说这都加小括号了,这是不是得写成高阶的形式啊,哎,Return,走啊来。好,那你这能收到什么呀,是不是ID呀啊,那如果你勾选的话,React是不是帮你调这函数啊,那你勾选的是谁呀。Input,哎,然后呢,展示出来的那个check box是吧,同学你给谁绑定的on change input,那你想拿到谁的值呢?Input它俩又是一个东西了,那所以说是不是可以借助这个event呀?好啊,那如果勾选了,那我就在这conslo做个输出,首先我先说你勾选或者是取,先勾你勾选或者是取消,勾选的是谁ID给我拿到,然后呢。
04:22
还得再输出一个东西,就是到底你是选还是不选对吧,说老师那个值就是点target,它给它点value对吧,老师那因为它是input框嘛,那肯定有value值嘛,哎,那你试试吧,啊来回到控制台同学吃饭这件事目前是做完的对吗?来我取消,其实我拿到001了,但是你发现这有一个叫做啊。你再给它勾上,你发现它也是on,说老师这是什么意思呢?我说一下,由于你的input的类型已经改成了check box,你就不能再拿点Y6值了,Input如果是这种最传统的input,你是可以拿到点Y6值的,由于你给人家改成了check box,对吧?原生的时候大家应该学过,所以说你拿这不能拿点value值了,那拿谁呢?有这么一个属性叫做check d是否勾选,哎,应该拿它好刷新一下啊,吃饭目前是不是处于被勾选状态,那当你取消勾选的时候,你看他说你要操作的人是001,要把它是否完成那个状态调为false,没有勾选就是false,老师,那我勾选呢,走001,你勾选它就是戳对吧?哎,好了,那接下来咋办呀,ID也拿到了,要把这个ID所对。
05:50
盯的那个todo完没完成,那个属性改成什么值也拿到了,那接下来呢,是不是得在item里边通知最外侧的APP更新指定ID的todo啊,哎,来吧同学,又是子组件想操作父组件的东西了,对不对?再给大家画一个图,这是谁呀?APP啊,蓝色的是谁呢?是list对吧?走list里边的那个橙色的它是谁呀?是不是item?所以说同学你觉不觉得现在是item想影响着APP里边的状态发生改变,那怎么办呀?那就得要求APP当年呀,得给item传一个函数,就跟刚才你添加一个todo,那都是一个道理。
06:41
但是同学们APP和list可以说是父子关系,那我想问你,APP和item就它就这橙色的框,你觉得他俩是啥关系呀?嗯,APP和item有没有一种感觉,他俩是祖孙关系对不对?哎,祖孙关系说老师那怎么办呀,一层一层传来,给你画个虚线,APP先给list传一个函数。
07:08
啊,能够更新里边指定ID的todo对象,但是list不用转手就交给了item,然后在item里面你合适的时候,你一调用是不是就影响着APP里的东西发生变化了呀?哎,来吧,同学走起,接下来怎么办?ID拿到了,改成啥样也说了,那是不是得在APP里边写点东西啊,刚才你写的爱的todo是用于添加一个,那在这呢?是不是得写用于勾选和取消勾选一个todo啊,啊,那我就叫这个名字叫做change todo啥意思呢?哎,去更改一个todo,或者说叫做update也行,对吧,Up data就更新一个todo也可以,没问题啊,那我就写这个吧,Update todo啊来吧,那同学你得告诉我你要改的人是谁,你还得告诉我那个东西到底完成了还是没完成,那我就用这个done去接一下可以吧,这不就是个行参吗?啊那接下来怎么办呀?首先固定的套路就是你必须得获取状态中的todos,你不获取你怎么操作呢?对吧,获取状态中的todos,老套路结构赋值拿到todos,哎,然后呢,同学你是不是得去todos里边一个一个的查找呀,你问一下你ID是多少001,那跟我这不一样啊,你I。
08:35
多少啊,002跟我的不一样,那你ID多少啊,003,哎呦喂,跟我传值一样对吧?所以说你得进行遍历啊,然后去找到指定项,然后再把它改掉对吧?哎,说老师那这怎么办呀,同学你觉不觉得这也算是加工一下数组啊,把里边的指定项的指定属性给它改一下子,哎,那走吧,咋写呢?Todoth.map加工我拿到的每一个都是一个todo,其实跟之前写这儿呢都是一样的啊,但是这儿呢,咱们用的是todo o BJ对吧?那在这呢,我就写todo了,或者是用这个也行todo OJ,因为拿到的确实是一个todo对象嘛,啊,那在这怎么办呀?
09:18
怎么办呀?同学你是不是得写判断呀,对吧?哎,那在写判断之前呢,先带大家看一个东西,其实之前咱都是说过的啊,我临时新建一个demo.html啊,跟大家说一个小事情,走,你比如说呀,同学举个例子啊,呃,写一个脚本啊,Let一个OBBJ啊,它身上有A是一,有B呢是二,好,那同学我想弄出来一个新的对象啊,叫做OBBJ呢二啊,它呢跟OBJ长得一样,只不过把那个B呀给它换成三,那得怎么写呢?老师这么写吧,A冒号一,B冒号三,这么写就不问你了,哎,这么写还记不记得了,点点点OBJ,我这啥意思呀?啊,我这个花括号加点点点啥意思呀?
10:06
你这个划括号啊,你可注意啊,这划括号可不是代表说react里边我要写JS表达式了,不是不是,你这东西是一个整体复制了OBBJ这个对象,如果你对里边的B不满意,可以在后边再写一下B冒号二哎,那这个时候呢,你olo你输出这个OBBJ2来右键打开看效果。走,切到控制台刷新,怎么样,A是一,B是二,那这儿呢,由于它原来就是二是吧,那我改成三来走,那这回呢,刷新一下B是不是三呢?哎,OK,是可以直接这么写,然后改掉里边指定的值的是吧?那这回如果你懂了呀,来删掉它,这就也好说了,同学,接下来怎么写呢?我写一个判断,如果当前的这个todo o BJ,它身上的ID啊,和我传过来那个是一样的,那也意味着是不是匹配上了,哎,那我怎么做呢?看着瑞return走点点点OBBJ啊,当然得叫做todo OB BJ是吧?哎,走啊,你要这么写的意思就是,如果你的ID和我传过来的ID是相等的,那咋办呀?那我就复制一份原封不动的返回,那对吗?不对,我要更改你里边的值,那个当的值,那改成多少呢?改成我这边接过来的对吧,你这如果用A同学,你这是不是这么写呀,啊,但是我。
11:25
上边用的是done,那么就能用简写方式对吧?啊,那有if就得有else,那如果没匹配上呢?嘿,那还麻烦啥呀?Return todo OB BJ是不是就行了?如果匹配上了,我是返回了一个新的对象里边的值,那个down的值被我改了对吧?如果没匹配上,那你原来是什么你就是什么,这不就结了吗?哎,那同理,这边是不是得接收一下呀?这是一个新的todo啊好了,在这写好一个注释,叫做加工数据啊,或者说匹配啊,然后呢,处理数据我得先匹配上吗?如果是一样的,那我就改掉你嘛啊那最后呢,做一件事,this.set state改谁呀?状态里边的todo啊,改成谁呀?这个新的todos,新的和旧的差在哪啊?就差在某一个ID的todo改了它的当值,对吗?
12:25
好同学,我得把这个update todo传给谁呀?传给谁呀?是不是item写好注释那那这个update todo干嘛呀?用于更新一个todo对象对吧?来吧,别客气了,Update todo传给谁?我知道你想传给item,但是APP和it是祖孙关系,先传给父亲,走this点对吧?同学,这我不写this点那怎么可以呢?我问一下,这为啥没写呀?这为啥没写呀?因为这提前取好了吗?哎呀,可千万别乱哈,同学啊,走着this.update todo是吧?哎,好了,传给谁了list同学啊,一定稳着点,你传的没给别点,给的是list,那来到list这同学你说list除了接到todos,除了接到之前给他todos,还得多接一个人,谁update todo。
13:21
走,但是自己用吗?不用反手他就装交给了谁,反手就交给了item,那所以说update todo等于老师知道this点你就错了呀,同学,这个update todo是我定义在这个类里边的东西吗?不是,它也是从外边接过来的,在这呢,在这呢,所以说不要加这个this OK,好,Update todo传给谁了呀,Item,好嘞,回到item里边,同学。那你这就别做这种无聊的事了呀,这怎么办?this.prop点谁update todo把啥传过去,ID还得把啥传过去,就当前你要把那个值改成什么event点他给它点是不是check it对吧?哎,那这回呢,我们试试啊,看看能不能行,那回到这儿,刚才我把那文件删了,那个DEMO,所以说这会儿哎,他说A找不到文件了,关掉啊回到这儿呢,我们刷新一下,走回到开发者工具去看APP里边这几个人的状态,首先咱一个一个来啊同学打代码那件事儿是没完成的,对吗?那我一勾选呢,完成了,那你看这是不是也完成了,如果我把他们四个都取消勾选,你看状态是不是随着都变。
14:37
哎,我勾选睡觉,那睡件就变为A好了,是不是完成了勾选某一个todo啊哎,同学其实现在有没有一种感觉,就是状态是不是在APP里面,那其实你品一品,同学你仔细的品状态在APP这。那么更新状态的方法,一个是添加东西,一个是修改东西,那你觉不觉得这俩方法就也得在APP里啊,所以说我们会说一句话叫做状态在哪里,那么操作状态的方法就在哪里啊,写一下状态在哪里,那么操作状态的方法就在哪里。
15:23
啊说老师的操作状态的方法,在APP里是不是就证明APP要用这个东西啊,其实也不是APP用I todo了吗?没有,他把这个给了hier对吗?哎,好了,所以说呢,自己动手也实现到我现在这种状况啊同学不要觉得你这一取消就能取消了就成了,你主要是得引发状态里的东西发生变化对不对,走打代码,嗯,没错,好了,这一小节呢,我们停一下。
我来说两句