00:00
在说完非受控组件之后,哎,这一个我们来说一下,受控组件还是直接用这个例子我们来复制改一下啊,改成二这个非不要,然后把这个标题也改掉,哎,受控组件,那既然是数控组件,我们就要有区别于非受控组件,所以这些IEF,哎,我们就不要了,都删掉啊。那。那这些也先注释掉,哎,这个也先注释掉。好,那这个。我们也先删掉啊。这个就是我们的例子,当然我们把这些都注释掉之后,哎,现在例子是可以正常的运行,但是没有任何效果,对吧?啊没有任何效果,那接下来我们就来写一下,那什么是受控组件,受控组件受谁的这个控制?在原生GS里面有一个事件,不知道大家记不记得,哎,就是on change事件,嗯,当内容发生改变的时候,就会触发这个on change事件。哎,注意啊,在react中这个是大写,在我们的原生GS中,它是这个小写,好,那我们给它绑定一个回调函数,哎,现在没有这个函数,来写一下DEMO。
01:14
呃,使用赋值语句加箭头函数。在这里先随便输出一些内容,看这个on change事件能不能执行,也就是当我们在这里面输入内容,当它的这个input框内容发生改变的时候,这个事件我们看看能不能触发啊。先随便输出个一。右键运行。打开controlrlo啊,我们来输一是不是触发了,来我们再输入一个是不是又触发了,就变成二了,对吧,就当我们每次的这个内容发生改变,它都会触发这个清理事件,看到了吧?好嗯,那既然它能触发这个事件。对吧,能调这个回调函数触发这个on事件,我们是不是可以在这个事件里面去获取到这个event,哎,这个事件对象对不对,那事件对象里面的这个target是不是可以得到触发这个事件的啊,到节点这个事件源,哎。
02:09
那它的这个value是不是就拿到输入的这个值了。我们来看一下啊。来刷新。我来输入一是不是拿到一,我现在是二是不是拿到一二了,哎345啊,我随着我们每次的输入,哎,都会触发这个on change事件,就是当它的内容发生改变,就触发这个on事件嘛,那当触发这个事件的时候,在这个回调函数里面,我们接收到这个事件对象,哎,从这个target的就可以获取到触发这个事件的倒母节点,那从这个节点我们使用它的这个Y6属性就可以得到数的这个值,对不对?好。那接下来,哎。就有意思了啊,那我们最终的目的是想点这个登录,哎,提交这个表单的时候去拿到这个数据,但是这个数据是在哪呢?是在我们每次输入的时候,这里可以拿到这个数据,对吧?哎,那同样的我们还可以给他去绑定这个侵止时间,每次输入的时候也去拿到他的数据,哎在这个对于所有的这个输入类的这个啊报表单哎都适用,比如说啊。
03:11
像这个check box啊,Input呀啊,这些都可以啊,Text air都可以啊好,那现在一个关键的问题是,那这个数据是我们在提交表单的时候在用,但是我们是在这里去获取的,对吧?在每一个它的输入框的这个信息事件里面去获取的。我们有没有一个地方能把这个数据先给暂时存起来,然后再,哎,我们提交这个表单的时候去获取出来再用,哎,当然有,这时候大家是不是可以想到这个state对不对,State是不是可以维护组件的一个状态,哎,我们可以把这个数据去放到这个state里面来,This site。State啊,我们来放一个色name啊,就等于。它可以吧,好来,这次我们来刷新。
04:01
啊,当然我们每次的输入这里控制台该输出就输入,但是我们怎么有没有看到,就是说这个数据到底有没有放到中呢?这时候就可以去使用我们安装的开发者工具,对吧?诶找到这个login组件,看一它的state是不是有,好那我们再来刷新一下,诶当然刷新的时候没有这个属性,对不对,是因为我们没有初始化这个state。对吧,好,那随着我的输入是不是就有了。是不是这样的,你看。啊,当然它这个速度可能会稍微慢那么一点点。好,这样我们把数据给放到了这个组件的状态state里面,当我们在表单提交的时候去使用的时候,是不是可以从里面去获取?获取到这个数据对吧,好。那我们先干什么呢?先去初始化一下,哎,就是说我们没有初始化这个username这个直接去用的话,这个是呃,不符合这个的规范啊,虽然你也一样能用啊,来初始化状态就是当你用到什么数据,你一定要先提前初始化,你哪怕给它个空都可以啊。
05:05
State等于右侧name,我们先给成空啊,Password哎,也给成空。好,这个时候我们再来看啊。就提前准备好了,Passname和password和username对吧,这时候输入它就里面就会有值,好,那接下来我们把密码也处理一下啊。那这个就不要叫DEMO了,你不能说每个都叫DEMO法,我们是做什么用的,哎,回答函数就把名字写清楚,它是做什么的,就是保存这个用户名的,我们把它改成C5。右侧name啊啊,这里也改一下,诶这个输出就不要了,同样复制一个我们叫c password。哎,把这个注释写一下啊,保存这个输入的用户名。
06:06
啊,这里是保存,嗯,输入的密码,密码呢,那我们存的是password对吧?诶。然后这里也给一个,就是给password,也给一个on change事件啊,让他去触发这个save password啊,这少写个S。好让他触发这个方法,诶,这样当我们去输入用户名的时候,会走这里,哎,把它给存到呃,State的这个user name里面,哎,当我们去输入密码,会走到里,把我们输的这个值啊value去存到state的这个password里面,好那。能存进来以后啊,那我先看一下吧,先让大家去看一下能不能存进来啊,我来输入这个用户名。111,诶,是不是存到这个user name,我来输入这个密码。
07:00
是不是存到这里面,好,那接下来无非是我在点击这个登录的时候,从这个推里面去获取这个数据就可以了,好把我们的这个注释都打开啊。哎,就是处理表单的提交,那就不从这个实例对象去获取了,从这个实例对象的state,哎,这里面去获取,去结构这个user nameme和passord啊呃,Password和这个username大家看一下,我们在存的时候已经是一个VALUE6了,哎,所以这里我们在使用就直接使用就可以了,就不用再点value了。清楚吧,啊,这个一定要注意你存的是什么数据,你一定要注意你的这个数据类型。好,这个时候我们来看一下这个完整的一个例子,效果啊。来输入一,再输入二二是不是弹出来我们输入的内容了,好。嗯。好像我们要说的,哎不是这个,我们说什么是受控组量对吧,那其实这个就是受控组件,哎当我们呃输入类的表单,我们的这个数据,哎是通过什么呢?通过这个状态去维持的,哎就是我们的输入这个数据呢,没有使用ref啊,当我们输入这个数据之后,哎通过这个。
08:09
这个N奇奇事件啊,把这个数据那存储到这个状态里面对不对,当我们用的时候从状态里面去取,哎,这个就是数控组件,它是谁的控制受这个组件的这个。状态的一个控制对吧?好,这个就是数控组件,那我们来总结一下这个数控组件啊。受控组件啊。那什么是数控组件呢?哎,随着你的。输入啊维护状态。哎,就是随着你的这个不断的输入去不断的去维护啊这个状态。嗯,表单数据啊,由状态维护。啊,由状态控制,状态维护。好,这个就是数控组件的一个定义,那我们和这个非数控组件大家对比一下,非常明显对不对,那数控组非受控组件呢,我们要去写大量的ref,对吧,但是我们来想一想,之前我们呃在看手册的时候,官方一直也在强调啊去。
09:15
这里啊,首先这里他推荐使用数控组件啊,那不推荐非数控组件,就是非数控组件,我们要写大量的这个ref,那我们回到这个ref里面去看,哎,这里又告诉我们物过度使用if,当你使用的特别多的时候,也会存在一些呃,效率上的一些影响啊,所以官方推荐的是使用这种数控组件。清楚吧,好。来啊,那其实关于这两个概念,通过这两个例子,哎,大家就非常明显的去对比出来了,而且关于这个概念,我也简单的给大家稍微总结了一下啊,受控组件就是现用现取,哎,你什么时候用数据哎,什么时候直接从这个我们绑定的if里面去取出来这个数据对不对啊,那这个非数控组件就是每次我们的输入其实就已经把数据给维护到了状态里面。
10:01
哎,当我们用的时候,直接从这个状态里面去取出来就可以了,好,那最后给大家再把这个补充上啊,推荐使用数控之下啊。不用写这个ref,因为这个官方啊。嗯。官方就是说不让过度使用if,好,这个就是数控组件。
我来说两句