00:00
好了各位啊,那刚刚呢,我们写到这儿,把这个列表啊,已经进行了动态的初始化,是读状态啊,然后遍历,然后生成的,那接下来呢,我们实现这儿的功能就是添加一个todo,哎,在这儿读一下输入框里的文字,说请你先输入任务名,啥叫任务名呢?就是你那个todo的名字,你要干嘛?然后敲下回车就代表你确认了,然后就把用户的输入放到状态里边,诶然后页面呢,哎,就呈现了一个最新的效果,就这么一个逻辑,那你说着手点在哪呢?首先你是不是得想办法获取到输入框里的值,那问题是通过什么办法获取呢?得看他什么时候敲回车,你敲回车我就获取你的值啊,然后就把你的值放到状态里边,页面就更新了是吧?哎,所以说着手点,你赶紧找到头部的这个hier组件,找到这个input框,给它绑定一个不是鼠标事件,是键盘事件,对吧?好了,回到代码当中,找到hier,打开它input。
01:00
是不是在这呢?来吧,给他绑定一个on键盘事件,都是key什么什么什么对吧?一个是keep down,一个是key up啊之前学基础的时候咱们应该都学过啊,建议大家呢,用key up代表这个按键呢,真正的按完了对吧?好了,我给它一个回调,This点我叫这个名字啊,Handle key up,呃,叫做处理键盘的抬起事件啊,定义好这个handle key up走里边干嘛呀?想想我给谁绑定的键盘事件input,我要拿到谁的值呢?Input绑定事件的元素和你要操作的元素是同一个元素,那就没有必要再给它打ref了,对吗?我们可以借助什么呢?事件对象这个event OK,想拿到值怎么拿呀?同学,conslo.target给点value对吗?哎,回到页面看一下效果,刷新一下,我输入12345。
02:00
是不是都有效果呀,但这并不是我想要的,我想要的效果是你输入12345的时候,不要去输出这个东西,等什么时候他敲下回车了,你再输出,那你觉不觉得同学在这个回调当中,我得判断一下你目前所按的按键到底是键盘上的哪一个,对吗?那同学我想考你一下啊,怎么获取啊,这就不是说你react说之前听的好不好,这就是一个原生的基本功啊,在哪呢?在事件对象这个event身上啊,有这么一个东西叫做key code,不是说react里边有这原生也有嘛,Key code对吧?就是键盘上某一个按键的代码标识啊,或者说键盘编码都行,那你看一下啊,当我输入的时候,我按下123,那49,五十五十一什么意思呀,就是你那个123那三个数字啊,这个按键啊,它的编号,那我们看一下回车是多少,敲一下回车,回车是13,那所以说在这儿呢,你就得亲自去写判断了,如果学过view的小伙伴呢,就知道,诶老师那view里边可不是用这种写法,那专门有一个at符什么,那这没有,就得自己判断了来写。如果event.t code它不是十。
03:24
按,那就证明你按的根本不是回车,我不做别的逻辑return逻辑停掉,如果你按的是回车,那么我再给你输出input框里的值对吗?好嘞,我们试试啊,回到这儿刷新一波走输入123456,你看控制台上没输出敲回车是不是出来了?好,回到代码当中,那你说event身上我要用key code,我还要用target,那你说我可不可以在最上方哎用解构赋值这种方式呢?我先写好了,是从event身上解构赋值拿到谁呢?一个是key code,一个是呢target,那这就能简单点了,这也能简单点了,对吧?诶好了,最终呢,再测试一下刷新输入45678求回车是吧?依然可以的,好同学你已经哎完成了获取用户的输入,接下来就差一步了,怎么的,是不是把用户的输入想办法塞到这个状态。
04:24
这里状态一变,页面就更新,对不好了,来咱们分析一下组件之间的关系啊同学,整体这个大的组件,我问你啊,是不是APP组件哎,然后我再问你这个橙色的这个加粗一点啊,稍微加粗一点,这个橙色的它什么组件呀,是不是还点组件,我把文字直接写在这儿,Hier,然后下边还有一个蓝色的比这个啊,这什么组件呀?List同学,我想问的是list是不是已经成功的展示todos这个列表了呀?那我想问的是list是读了哪的数据才能展示出来这些列表呢?是不是读了APP这个组件里的状态啊?APP不是把自己状态里的todos传给了谁?List,也就是说我用线给你表示的话,那就是这么一个意思,APP是红色的,它把东西给了谁呢?List?
05:20
好,那接下来如果你想让list有不同的展现,或者说能展示出一个更新的数据,是不是得要求你得把APP里的状态你得更改一下啊,对吧?你得从根上说问题状态在APP那呢?APP的状态得改,它传给list的东西才是改掉之后的,对不对?那有没有一种感觉,同学,现在你得实现这么一条线,就是在hier里边,你所获取的用户的输入得影响着APP里状态的变化,对不对?你得想办法把hier所获取的用户输入传给谁,是不是APP,那么同学你说这个是不是叫做负,那你说这个hi也好,这个list也好,是不是都叫做子,同学父给子传东西老简单了,咋写呀?同学你在副组件APP里边你一定写过这种代码list,你是不是传了一堆todos对吧?同学你说这干嘛呢?是不是父亲给儿子传东西呢呀,Todos你看直接用props是不是就可以?但是同学你说这个儿子怎么给父亲传点东西呢?
06:37
老师,这我就不知道了,同学来其实非常简单,你都不用学习什么新的技术,只不过是扭转一下思维而已啊同学啊,理性的分析问题,是不是想把hier里边哎,我所获取的用户输入想方设法的传给APP对不对?那APP拿到干嘛呀?APP拿到就更新自己的状态不就得了吗?是吧?那所以说来同学就本着这个原则,想把hier获取的那个用户输入传给PPA来回到代码当中,你说这咋传呢?啊同学,我先关掉这儿打开p pappp是父亲哈,嗯,他有几个孩子呀?两个啊,应该是三个是吧?哎,Hi list福是吧,三个同学,那他是不是给list这个孩子传递了pro呀?
07:29
同学,那我问一下他能不能给hide传一个呢?能,那我传一个A等于然后呢,z.a同学,我要这么写的话,就得保证我有这个A,但是现在有吗?没有没有,那我就写一个呗,哎,你看我把A写成啥,嘿。同学A是个啥呀?函数说老师你等等等等,你给list传todos,然后是个数组,它能遍历,它能展示,那你给hi传了个函数,你这是啥意思呀,这看不懂,同学,函数是不是就用于调用的呀?那你看我在这能不能接到一些data数据,那我在这可不可以consolo,嗯,我就输出这个data呀,嗯,那前边呢,我给你加一个标识,就是APP里的,哎,拿到的东西对不对?APP逗号data,那同学我问一下你给没给hier传递pros传了。
08:21
叫什么名叫A,那所以说你传了,你说hier这块是不是就能收得到啊,那你这块已经写了赋值语句加箭头函数的形式,所以说它里边的this指向是不是没问题的,那你说我这么写啥意思呢?this.pro.a是不是拿到了当时父亲给heer的A呀,来是不是函数掉T啊,那掉的时候呢?哎,走着它给它点Y6,同学它给它点VALUE6是啥呀?是不是用户的输入,哎,那这回你瞧着呗,来回到这儿啊,刷新一下,我输入123敲回车,走这个123是hier里的那句输出对不对?同学,那我问一下你把没把东西递给APP啊,哎,递过去了,所以说同学来一波总结吧,如果说子组件想逆着把东西给父组件,你说得怎么给来别嫌麻烦啊,最后给你画一图,因为这是一个小点啊,后期我们会进行总结的啊,就是组件之间的这个通信啊,就是两个组件之间传递数据,我们。
09:22
我们就说是组件间通信,OK,好,来同学啊,走着红色的是APP对吗?哎,橙色的是谁呢?Hi的组件对不对?同学,Hi是不是子对?APP是不是父对?那子想给负东西,那得怎么给啊?同学,总结一波,就是如果子想给父东西,那就得要求父,当年呀,我写个虚线传给子一个函数,父传给子一个函数,通过什么传递这个函数啊,当然是pro。哎,父给子传一个函数,然后子呢,在合适的时候,在想给父亲递数据的时候,调一下这个函数,就像我刚才写那个A,我问一下是不是就可以了呢?同学们,哎,OK,来吧,走着,那现在好像A能打通这个流程了,只能给复传东西了,那叫A不好听吧,是吧,毕竟是不是想添加一个todo,那我就这么写a DD todo对不对?哎,添加一个todo,然后你给hide传的也别叫A,叫I的todo,那传的是哪个呢?this.i todo同学他俩不一定非得叫一个名字,你懂我意思不就这你可以写一个小猪佩奇,它都是可以的,但是没人这么写,一般让他们的名字都一样啊,这样的话统一一点是吧?那同学这也不应该叫做data,你说这应该叫做什么呢?
10:47
说老师,那就是要做的事的那个名字呗。那同学我问一下啊,你拿到这个名字了是不?嗯,拿到名字了,接下来干嘛呀,老师添加一个todo嘛,但是你要注意你拿到的是不是仅仅只是一个名字。
11:02
名字可不是todo todo是一个对象,这是一个todo哥们儿,这是一个todo,对吗?Todo是一个对象,不是一个名字,名字只是对象里的一个属性,你说对吗?哎,那所以说呢,同学,我这么设计的,你看着我需要呢,你给我传过来的本身就是一个对象,你别直接把名字就给我甩过来,那不行,那咋的,你把名字甩过来,那我这那我怎么操作嘛,还有ID啥的呢,我需要的是你给我传过来的就是一个todo o BJ,哎,我用这个行参todo o BJ啥意思,就是一个todo对象,哎,好了,写好注释,I的todo用于添加一个todo接收的参数是什么呀?Todo对象啊,哎,你看强调好这个事儿,那所以说这里边怎么办呀,同学你。
12:03
是不是得拿到原来这一堆凸度,在原来这一堆凸度的前方把人家传过来,这个新的凸度对象是不是放进去?那所以说第一步走起叫做获取圆todos怎么获取啊,结构赋值this.state点拿到谁呢?Todo获取完了吧,接下来呢,那怎么办?是不是要在这个数组的前方加点东西啊啊,写好了叫做追加一个todo,那那咋追加呢?瞧的同学,我这么写,这是原来的todo数组,我就叫做todos,我在这儿呢,我在定义一个新的todos数组,我叫做new todos你一定要注意啊,同学,这个new可不是说我要创造谁的实力,根本没那意思,其实你这呢,你不标准点写,你写TODOS2就得了,但是我不想写这么low的东西啊。
13:03
好,你得来一个新的todoth,等于它是个啥呢?数组,你注意看我这么写,原来的todoth你是不是拿到了,好点点点走起之前都写过,你把你新拿过来,那个突读对象是不是放在这同学这啥意思呀,构建出来一个新的数组。新的数组的最前方是新传过来的东西,那后边的呢,就是原来数组里的东西,OK,一个新的todo是不是准备好了?嗯,接下来呢,是不是更新状态呀?你不更新状态页面咋更新呀?你这只是说你自己玩的挺开心,你定义了一个new todo,但是这个东西是不是没有放进去啊?好了,来执行this.set state走改谁呀?哎,状态里的todo那变成哪个数组了呀?同学,你要这么写就白玩了,这么写白玩,你得把这个哎,加工完的这个数组是不是放进去,OK,你只要敢给我传一个todo对象,这个对象里边包含着ID name,以及这件事是否完成,我就可以帮你把这东西放进去,而且是放在了列表的最前方,你说对吗?同学,那所以说接下来啊,注意看这I todo我得传给谁,我得传给谁,是不是得传给hier啊啊,那这I todo I todo是不是传进去了?那来到哎,走起hi点中。
14:25
那这别pro.a了呀,是不爱的todo啊,那同学你觉得这么写合适吗?你这么写只是把用户所输入的todo的名字你传进去了,但是人家APP里的I todo,人家要什么呀?哥们儿,人家要的是一个todo对象。哎,那所以说这儿呢,你得准备准备是吧,哎,慢慢来,同学这儿呢,给它都写好注释啊,结构赋值获取这俩人,因为我要用嘛,复制,然后这儿呢,哎,判断是否是回车按键啊,那这儿呢,是吧,就得获取到这个,诶用户所输入的值了,那这会儿呢,咱这么写吧,叫做准备好一个todo对象,你调ADD todo的时候,人家要求你得写一个对象嘛,那所以说你得准备好一个对象再传给人家对不对?Cost叫做todo OB BJ等于它是个对象,你把谁传进去啊?哎,你得把todo o BJ传进去对不对?哎,好了,里边有什么呢?ID多少不知道啊,先这么写着,里边是不还得有name呀?Name幕是什么呢?
15:46
Name你可知道啊,Name是他给他点儿value对吧?还有啥呢?有一个属性叫做当同学,你说新添加的一件事儿,那个当的初始值是不是一定为false,就这事儿还没做呢,这事儿要做完了,那你还往里边添加干嘛呀,刚开始肯定是没做完的,但是后来可能是做完了是不是,哎,同学问一下这ID怎么办呀?
16:12
说老师要不行就这么写呗,ID就都叫一吧。同学,这样绝对不行,你这样做的后果啊,我说一下,如果你添加两个人,那这两个人的ID就都一样,你添加十个,十个人的ID就都一样。同学,我想让ID不产生重复,那怎么办呀?其实啊,这个时候呢,你写什么都行。有些同学可能会想到了,老师,我可以写这个呀,对吧?me.random这不是随机数嘛,嗯,其实用这个也没啥太大问题,但是毕竟这些东西都是小数,对吧?零到一的小数不太合适。还有一些同学呢,可能会想到老师,我可以用这个date.no我生成一个时间戳对吧?哎,时间戳是这个世界上唯一的东西,是不是不能产生重复?那同学我问你一下,如果呢,就巧了,这两个人同时用你这个系统,同时点了按钮,是不是有这个概率,这俩时间戳是一样的,是不是有,哎说老师那你看随机数也不让说啊,这个时间戳也不让说,那我写什么呢?那给你推荐一个库啊同学那。
17:12
那我们打开这个浏览器啊,我带大家呃,搜索一下啊,咱们呢,是有一个专门生成唯一这个ID的库的,叫UUID啊,咱搜一下在这儿呢,UUID它是一种规则啊,同学就能生成呢,一长串的全世界都唯一的这么一个标识啊UUID啊,然后呢,咱们就可以哎用它去作为ID,那问题是怎么生成呢?同学可以这么生成啊,有一个库呢,叫UUID,我们可以安装一下这个库怎么安装啊样ADUUID,或者你可以这么写啊,叫做NP mi,然后UUID就有一个库呢,它叫UUID,但是我不太推荐大家直接用这个库,因为这个库呢,它有点大啊,有点大,有另外一个库生成的也是UUID,但是比这个库呢能小一点,那个库的名字叫做nano ID,哎,Nano是不是有迷你的意思呀,叫nano ID,所以说我推荐大家呢,安装这个nano I。
18:12
ID ya ad nano nano ID说老师这个脚手架没帮我按好了没有,他哪知道你要用这个呀啊来走,安装上young的nano ID,这个库非常小,它会很快的就安装完是吧?你看也不能吹这牛,我刚说的很小,很快就安装完,结果它就慢了是吧?哎,好了,安装完了啊,如果那这库怎么用呢?啊,我就直接跟大家说啊,它是这么用的,注意了啊,我是不是要引入东西了,咱一直在强调第三方的东西往上靠自己的往下靠样式放在最后,这是一个规范啊port引入走,你刚才是不是下载了一个库叫做nano ID,它里边用了分别暴的形式,就暴露了这么一个nano ID,这个nano ID呢,是一个函数,你每一次去调用nano ID的时候,它都会给你生成一个字符串,而且这字符串呢,它能保证是全球唯一的。
19:10
啊好,来,那我们试一下啊,我是不是引入这个了,我在上方来个consolo,我就输出nano ID的调用结果,我再来一个,再来一个,是不是三个conslo呀,好,那我们回到页面里看一下效果,哎呦喂,他报错了,看报的什么错误啊,他说你hier组建index.gs叉这个文件里边第16行有一个语法错误,那我们看一下呗,16行怎么的了呀?呃,在这儿啊,ID没写是吧,那我先临时写一下,我先写个一行吧,哎,保存回头来到这刷新一下,同学你注意看啊这。是吧?哎,有三个东西,而且你再一刷新呢,它都是不一样的哟,你看每一次生成的都是不一样的,哎,所以说呢,它就能保证,诶这个字符串呢,是一个首先肯定是随机的字符串,而且不是随便的这个随机知道吧,它还能保证呢,这东西尽可能是唯一的,哎,所以说这比较好用,推荐大家用一下这个nano ID,那所以说呢,我们哎不在这儿做输出这个ID,我们就直接nano ID,哎,你调用就可以了,你新添加的不是没有ID吗?没事,我用nano ID给你生成一个,而且我还能保证它是唯一的,对吧?那然后呢,我再把这个东西,哎再调用这个同学,我调用这个啥意思呀?
20:30
通知APP是吧,把这个东西拿到,那所以说这呢走哎叫做将谁呢?Todo o BJ啊传递给APP,好诶这么多事儿做完了,那我们试一下呗,看看它能不能行呗,是吧,来到页面当中注意看了啊,刷新一下啊,把这块呢给它删掉,来写一个123,我敲下回车啊走123是不是来了,对吗?同学啊,但是有点细节上的问题,你这是不是没清空啊,还有一个细节上的问题就是你什么也不输入,走是不是也能添加,那这都不行啊,所以说我们得找到这个里边还得写点判断啊,在这下边呢,再补一个判断叫做添加的todo名字不能为空写判断,如果怎么地。
21:26
如果它给它点value,最好你给它出去一下空格啊,去一下空格trim一下对吧啊tri。如果它等于空对吧?去完空格之后,我发现你是一个空串,那怎么办呀,首先我得aler它一下,我得警告你一下,叫做输入不能为空,千万别忘了最后一个动作就是得return,如果你不return的就是啊输入不能为空,然后呢现剩下的事儿怎么办?该做还做那不行啊对吧,不合法了,得给他拦住啊,那这回呢,我们试一下啊,来刷新走什么也不输入走啊,输入不能为空啊,那我输入点456走是可以的,还有最后一个动作是不是清空啊啊回到代码当中,同学,那你说是不是在最后一步我应该清空一下呀?哎,清空输入怎么清空了,他给它你都握在手里了,他给他点VALUE6等于空串是不是就清空了呀?来整体跑一下效果啊输入啊,吃饭睡觉,打代码逛街,那再来一个吧,是吧,哎,就谈恋爱来回车走是不是加上了,哎来同学们,我们借助呢开发者。
22:37
工句去看一下同学你看啊,多么清晰啊,这结构APP里边有三个孩子,分别是hier list foot list里边呢,有一个一个的item对不对?哎,这个key呢,也给你展示好了,来展开这个todos同学观察一下吧,啊,一上来呢,人家就有吃饭睡觉打代码,你新添加的来是不是在这儿呢?没做完的这事儿falses ID为这个,名字为这个是不是就可以了呀?哎,我们就把这案例呢,诶就完成添加这个小功能同学捋顺一下整体逻辑呢,是这个样子的,红色的是谁呢?APP状态是不是在人家那儿呢?哎,这个橙色的是谁呢?还得还得啊捋顺一下。
23:20
反应快的同学呢,也别嫌烦是吧?He啊,只是在为以后做铺垫呀啊,那这个是哪个组件呢?叫做list,整体的交互模型是这样的APP啊,里边存储着一堆要做的事儿,他传给了谁呢?List?然后APP呢,哎,我用虚线,它又传给了hier一个函数,对吗?那函数能干嘛呀?能接收一个todo o BJ,然后hi组件在合适的时候调用了当年父亲传给他的那个函数,然后呢,把todo OB BJ呢交给了APAPA在拿到这个todo OJ之后呢,放到自己的状态里,就引起了PP状态的更改,PP状态一更改就得重新调APP里边的render APP里的RENDER1重新调用不要紧,由于list是它的子组件,那所以说就引发了子组件的重新渲染,然后东西就来了呗,就是这么一个交互模型,好了,我们把这小节呢停一下。
我来说两句