00:00
好了各位啊,那说完了这个高阶函数与可以化之后呢,接下来我们较真一下,刚刚啊,给大家渲染的气氛就是我没有办法同时接到data type还有event是吧?哎,刚才咱这么说的,我倒想接呀,但是接不到呀,那如果你非得叫这真儿同学我跟你讲。你不用高阶函数,你也不用函数的颗粒化,你其实也可以同时接到这两个人,一个data type,一个event,其实接event不是我们的目的,我们主要是想拿到真正的那个value值,对吧?同学,哎,想想得怎么写呢,我能同时接到他们两个。好,我给这个呢命个名啊,叫做一高阶函数与函数的颗粒化,我在这基础上呢复制一份。改个名儿。交二不用颗粒化实现,不用颗粒化的实现,好来名字呢复制。
01:09
往这里放,那这些注释呢,我就先给你删掉了啊同学好。我的目标是这只接到两个值,1DATA type 2value英文的逗号,如果你真的有一天能同时接到它和它,那你觉不觉得这个函数你也不用再包一层了,是不是直接写这就行了,而且你都不用even点它,给它点了,是不是直接写这Y6对吧,好。我们往下看。那你说你要这样写的话呀,你这里边儿肯定就得改一改。你这要是这么定义save form date,你这如果要是这么调用,那可惜同学你只能接到第一个参数,对不对,那个value值你绝对是丢失的,说老师那这你怎么写呀,你这写不下去了呀,能就是麻烦一点,瞧着同学删掉,我想问大家一个问题。
02:04
你是不是必须得把一个函数交给on change作为回调才可以,那你说你刚才的写法这么写是不是把一个函数交给on作为回调啊,对,哪个函数啊,Save form data调用返回的那个函数对吗?这么写呢?啊,那你就是把save form data交给了on change,作为毁掉同学,你说我要这么写呢,啥意思呀,我是不是在这直接就写了一个函数啊,On change你不就要个函数吗?我给你啊,那所以说同学你说这个蓝色框里的函数是不是等我触发on change的时候react帮我调的呀?那所以说谁能收到event呀,是不是它呀?那你在这个函数里边是不是可以做一件事情呢?就是调用save form date,好,调用this.site form date来吧,传俩值,第一个谁username,第二个传谁啊传谁啊,是不是发生on change事件那个元素的value值啊?
03:18
是不是可以通过event取出来啊?点target.value是不是就传进去了?同学,捋顺一下这个写法啊,On change需要一个函数作为回调,我给没给给了。那react就会帮我调这个函数,就会传入这个event,那我通过点它给点value就能取到值,那我在这个函数里面就做了一件事,我是不是调用this.save form data。同学,那你说我用颗里化了吗?没有,那是不是也实现了呀,对吧?科里化说的意思是通过函数来回到这儿,通过函数连续调用。啊,然后还返回函数,多次调调调,然后传多次,最后统一处理对吧?我把这段代码给你粘过来,同学就在这儿呢,演示颗理化,把这一堆复制来到这个里边啊,我给你粘到这儿,让你回头呢,也有一个参考对吧?好了,压在这缩进调一下走对吧,这叫可理化,那你说关掉这儿回头看这同学,那你说就这个定义来说,我用颗粒化技术了吗?
04:24
没有。哎,那你看是不是也实现了呀?好了,那这就不墨叽了,同学,你说这能这么写,这是不是也可以复制一下给谁呢?是不是密码啊,那所以说这回你来看吧,走输入用户名是123,密码是456,点击登录啊,那密码没拿到是吧?那检查检查看密码怎么的了,是不是你这没改呀?哎,Pass what好了,这回呢,我们再试一下,输入123,输入456,走是不是都能拿到值啊,哎,这段代码呢,还可以再精简一点,你别在这一直event点它,给它点Y6,你这是不是可以把event递过去,别写这么多嘛,这个里边内联的东西尽量简写event,那你这收到的可就不是Y6喽,是不是event,那你这就得是event点他,给他点儿Y6。
05:15
对吗?同学,就对于这种写法,你一定要拎得清,到底点不点,它给的到底从哪取,取出来的是对象还是直接,是值还是节点,必须特别清楚,那怎么能清楚啊,就得前提建立在你大量的练习,你得多敲啊,对吧?啊说老师那这就行了,来再试试效果。刷新一下输入123密码456走是不是也没问题啊,还能再精简,箭头函数左侧只有一个参数小括号省略,箭头函数右侧只有一句话花括号省略,也就是这儿和这儿可以删了,那这儿和这儿就也可以删了,OK,同学我也实现了对吗?没有用客体化去实现啊,说老师那我们写的时候,那你像这种受控组件我们哪个写的多呢?哪个其实都挺常用的啊,你直接写在这儿也可以,或者呢,你用这个科里化呢也行对吧?好了,那这一小节呢,我们停一下。
我来说两句