00:00
这没什么问题吧,没什么问题,好,那下面就要说下一步了啊,下一步我们是不是会用户会往里面输东西对不对啊,往里面去输东西啊,往里面去输东西接着啊,有个事情呢,输的过程中要不要提示我这个输的格式对不对,要吧,这是一个事情,也就是说我们要进行前台表单验证。这是一个通用的概念,这能听懂吧,比如说我们现在啊,其实有两个事情要做,第一个事情啊,叫前台表单验证啊,当然一说前台表单验证,那对应有什么后台表单验证是吧?好,下面第二个事情是什么呢?就是我输,假设我已经输对了以后,我输对了以后,假设我开始输了2ME,密码也输了2ME,这是不对的呀,那对了以后我点击登录。是不是要去准备发请求啊,那准备发请求是不是要先收集数据?
01:02
我输入数据的收集起来,听懂吧,好。嗯,就是一个事情叫收集表单,输入数据,是不要把这两个事情做了,我们最终才能提交请求,是不是,但这两个事情刚刚说过,谁都能做呀。这个文档告诉我的,谁都能做。是不是他都能做,只是怎么做的问题,是不是?这能听懂不能听懂好,那下面它不有例子吗。它其实是有例子的,懂不懂啊,OK,那这个地方来我们来说一下啊,这个地方就有例子,其实大家看一下,我点一下你看。我是不是可以反观例子做把它看,主要其实就是看懂它仿他做是不是好来注意啊。大家要知道验证的时机,比如说我点按钮它会验证码,只有这一个时机吗?
02:02
不是。不是还有一个时机就是什么,输入过程中它有诶刚才在刷新啊,输入过程中它有验证,大家看到不。啊,输入过程中有一证,这里面再说你的用户名是必须什么输入的吧。你看我随便出一个,他是不是都报错了,这个要求好像级别有点低,是不是啊,我们的要求就相当于比他的级别要高一些,我们来看一下。我们用户名密码的合法要求是际上要求是一样的,首先必须输入明白吧,啊,这个必须大于几位呢?四位必须小于什么呢?12位啊组成必须是英文数字下划线组成,诶这种要求是不是比较常见的啊,这个第四个是不是应该用正则吧。能听懂吧,啊好,关键是咋验证呢,这个时候就有点难度。
03:02
有难度,我们来看一下啊,来看一下它。那我需要把他的代码给他什么,展开一下是吧,展开一下来。在这个里面呢,它在this.props这里面。多了一个属性叫什么?Form说明我的这个组件接收了一个属性,叫什么form,但是我要告诉你,我们现在没有来,我怎么知道我有没有了?我的这个组件有没有接收到一个form呢?我应该怎么看?啊,这个时候我们刚刚说过,是不是可以看的工具看组件,看组件是不是看组件的数据,数据包含自身的和这个外部传入的吧。那我现在应该去看我的login什么组件,看他有接收。Form form的一个pro吗?没有,为什么他有呢?诶这个难度的地方就慢慢来了啊,在这个地方他看的。
04:06
啊,看好了,这个放到这下面来啊,最终渲染了,不是刚才定义那个包含form的组件,而是做了一个这样的事情,这个代码就不好懂,我给写一写啊,我给他写到下面来,写到我这里来,也就暴露了,不能是它不能是包含form的这个组件,而应该是什么呢?啊,我先写写。Are什么意思?包装的意思能听懂不啊?Logy等于它的写法是这么写的啊,这个语法就不好懂。好,最终暴露的是他。好,你先别,我们先不做语法,我们不管语法,我们先来看一看它有没有突然之间我的这个组件里面是不是能看到那个form了,我们先看一下结果,有结果再反过来看。
05:04
来回到我们的这个组件找一下,还是找一下我们那个什么呢?Login。有了吗?是不是给我传了一个缝,这就是这个得啊,这个里面的说通就很多了,而这个缝呢,里面是不是提供了很多很多的功能,其中。大家看好了,有这几个功能,这两这个。这是干嘛去了?第二,Field value什么意思?是不是代表我某一项啊,我现在是不是有两个音input的。是吧,有两个音input的就对应两个费,那也就是说通过这个form对象是不是可以去取调用这个方法得到我输入框里面的值。Y流嘛,这两个的区别在哪,大家觉得。一个应该取某一个,一个取什么多个。
06:03
这能懂吧,还有这个,还有这个。When什么意思?Va。以进行验证啊,它是个动词啊,它是个动词啊,进行验证,进行对谁静音呢。是不是对我的那个表单项里面数据进行验证,那也就是说其实这个方法什么时候掉了,当我点击按钮的时候,它就会掉,听懂了不啊,我们先啊,我们刚才说我们现在是不是两个事情,一个是收集数据,一个是进行表单验证了,我们得一个一个做一下,做两个吧,太费劲了,我们先做一个简单一点的,先做什么呢?收集数据的事能听懂吧,说白了就是我点击这个提交按钮的时候,点击这个登录按钮的时候,我在回调函数里面能输出我输入的值。听懂了吗?啊,我们先做简单的,因为这个简单一些。
07:01
好,其实说简单它也不简单,主要是里面的结构吧,要写好的代码,好一些代码。但是你写多了就是一个套路,固定的代码,第一写的时候特别的费劲,先第一步这个啊,我们先看一下语法。首先这个form是个对象吧,这是它里面的一个方法是不是,而这个方法返回的是什么?是不返回的这个函数,而这个函数执行要接收一个什么是一个组,一个组件呢?而整个它返回的是一个什么新的组件,对不对?这能听懂了不?这个地方一这一下子就会产生两个非常重要的概念,一个叫高阶函数,一个叫高阶组件,这个说过吗?高级函数说过对不对?那说过了我就问你了,哪个函数是高级函数?
08:02
后边那个。哪个函数是高级函数?Creed。为什么它是高级函数?因为它返回的是一个函数。是不是能懂不好这两个概念我们等会再说,我们我们先告诉一下,这里面实际上两个重要概念啊,也就是说我简单的说就是现在做的事情简单的表达来,简单的表达是什么呢?包装。Form组件什么叫form组件?就内部有form,有form标签的组件,我们称为form组件,听懂了吧,就是这个组件内部包含了什么form?能听到不,我们称它form组件,包装form组件啊,生成一个新的组件,它为什么包,哎,包的那个新组件是这个名字,大家看一下,我搜一下你就知道了,来看好了。
09:05
我去搜索我的Logan,你看在这个login的外面。是谁,是不是这个名字就这个。听懂了吧?而这个新组件会干嘛呢?新组件会向。Form组件传递一个。强大的对象,对象属性哪个呢?小写。能听懂不也就是说大家知道我们某一个组件接收属性是副组件传的,嗯。能听懂不,我在这里面说吧,因为他也老是更新,让让人。搞起来有点麻烦,来我在这里说啊,大家看好了啊,来一个loging,它是不是有个form loging是它的,它里面是不是副主件呢?这个内部是不是罗他子组件嘛,那副组件是不是给主件传了一个什么。
10:07
Four。听懂吗?当然这些也是他传的,这个是不是我们路由组件接收的三个属性,这个我们暂时先不管,我们是不是重点的这个form,那也就是说我们现在包了以后。我们的这个form组件是不是就可以去得到那个form对象了,怎么的?Pro点什么form,而这个对象是不是具有我们说的获取数据以及进行表达验证的一些方法?能听懂不能听懂,哎,这个就是那个啊,具有强大功能的对象。啊,也就是说那个form,我们说form标form表单,它不有具有什么收集数据,表单验证等等一系列功能吗?他都通过谁来做的呢?通过他做的。
11:09
能不能听懂所有的功能都集中他身上了啊,这一个这一个小写form对象是这个吗?我问大家是它吗。不是,这是那个用来显示界面的标签,是不是组件标签,他们俩是两码字,只是名字是不是差不多好。有了它以后,我们来去就去,可以去看啊,看你代码,看他的这个代码,其实第一次学这个东西还是有点费劲的,因为它的这几个有点复杂。来看一下上面这个什么意思,告诉我,我把代码拿过来。说明这个form对象里面是不是有一个这样的属性,其实是个它这四个方法,那得到的就是函数吧。能听懂不?那我们当时来写是不是就不用写前面的。
12:05
嗯,对,能不能好这个啊,这个方法必须要用啊,必须要用,后面我们才能去进行获取值以及进行表单验证,那怎么用它呢?看好了,这个写法也是特别让人难受的,说实话我先搬一个过来好吧。我先搬一个过来,让大家看看啊,看看大家能不能扛住。也就是说最后写的状况是这个样子,大家看一下。嗯,什么意思啊,估计大家现在看到这个我脑子里。就直接懵,我觉得就是第一眼我看着就蒙圈了,我感觉。是写什么呀?是吧,好来看好了,首先来看一下这整个它是个方法,它是函数是不是,呃,这个函数执行接收几个参数,大家看一下两个,一个是标识名称,还有一个是配置对象,大家看它配什么去的。
13:08
Ruler是ruler什么意思?Required me,这不就是我们刚才看到那个提示吗?Require什么意思?这个咱们用用过这个名词吗?咱用过。是不是有repair?是必须的吧,这实际上在指定验证规则是不是啊,当然我们现在不做的话,也可以先展示find的对不对?好,后面大家看到又来了一个括号,是啥意思?说明这一个函数,它是一个什么函数,高阶函数。对不?能听懂吧,能听懂,那这个高级函数它的第二次调用的时候,是不是要接收一个组件标签。包装包装的是不是就是我们那个表单项啊。
14:01
表达还是以前的写法,对不对?好看,我写一写。看看我们再写一下,也就是说一个什么事情呢。好,我来写,写的过程中好一点,你写好以后就看不太懂了,我们现在往里面写GS代码,我得怎么做。包括包括大括,我现在去调用这个方法是吧,叫get什么,也就用这个函数,用这个函数来包装我的那个input,但是它是这么搞的。听到吧。而在前面它执行的时候,也就是说它是个高级函数,括号以后是不是又给括号啊,啊,第二次的时候才传入这一个啊input标签,好,那接着在这里面至少要指定一个参数。就是标识名称,这个标识名称有什么用呢?将来我是不是要去获取这个输入框的值,而这个输入框的值就存在这个名字里面。
15:07
标识名称嘛,听懂吧。能理解吧,啊,也就说这个user name是一个什么标识名称,只是说第二个参数可以查一个配对象,是不是来配一个验证规则,当然我们现在还不需要验证,所以说可以不写,甚至不写都行,当然你写个空对项相当于没写是不是?这能听懂吧,能听懂。这个好像看起来清爽一点是不是?啊,写的过程中呢,其实好一点,最怕的就是写完之后再看。就容易让人头晕眼花,说实话啊,但是你一个一周或者一个月之后就觉得哎都一样看,就好像说大家第一时间接函数的时候,你是不是很反感呢?这个用箭头定函数看着就别扭,但你现在看来是不是也觉得还好了,是不是?能听懂吧啊。
16:02
这能懂吧,好,那这个人写以后,下面另外一个其实是什么,是不是类似的,只是这个名字要看是。能听懂不啊,这个时候来替换掉啊,我们的这个音破的对吧,OK吧,OK好,那下面要说一个事情啊,下面要说个心,我在这个回调函数里面是不是得去取。我对应的值啊,输入值这个怎么取呢?还是要通过那个强大的form对象,听懂了不只是我,怎么样得到我那个强大的form对象呢?很简单,This,什么pro在我的属性里面对不对,有一个特别的属性叫什么form?我得到那个form对象的,嗯,对象以后能干嘛呢?那能干的事情就很多,下一步是不是想办法获取那个表单上的值啊。
17:06
的输入数据,那怎么得了?刚才我们是不是看到过一个方法叫get fair的,别fail了,就非指的了。因为这样可以把所有表达项里面的数据都得到,其实我们也就两个能听到不啊,也就如果这个,你说它返回的是个什么呢。对象啊啊是,但是是数组吗?对象为什么,为什么强调是对象不是数组。是不是数组里面的数据是不是以下面为标识,而对一下里面数据是不是名称做标识,你说我们输入的数据是以名称做标识,还是以下边做标识,哪个名称就是这个,这不刚说标识名称。
18:00
能听懂不能听懂,来我们来看一下,看是不是啊,看是不是。那我就把这个Venus打印一下可以吧,啊这一个呢,来前面写个标识,写个标记。但现在我们的写法有问题,问题在于表单会自动提交,我们把这个整完了,我们就可以休息啊,马上啊,来个A来个B那。看一下我们当前的啊,点一下登录。你看他是不是提交表单了。要吗?不要怎么做啊,叫阻止。注意啊,是叫阻止事件的,什么默认行为?怎么阻止呢?点prevent default。能听懂吧,能,那这样的话它就不会去提交表单了,把这个问号给它去掉啊,相当正常的访问,接着我输入一个A,输入一个B走,你看有没有确实是对象,大家推测好,就这一项很关键是吧。
19:10
能懂不能懂,那有了这个数据以后,我是不是后面就可以提交。那第二请求去登录了。当我们有个事情没做干嘛?表单验证还没做是不是啊,那后面的事情其实就还好了啊好,那我们先讲到这里,后面我们先可以把这两个讲一讲,再去讲那个相关的东西啊,先休息一会。
我来说两句