00:00
来,我们要去,首先我们得找到那个form组件的文档啊。能听懂意思吧,来找一下form啊,找到form组件的文档,一个表单能看到吧?好。点一下让他过来,这是我们的表单啊表单他说诶点错了吗?点到另外位置去了。大家看看,他说这个表单能干嘛呀,大家注意看一下啊,具有数据收集校验提交功能的表单,那一说我的表单不仅能显示样子,是不是还有一些功能呢?这是我们普通的H表单是不能比的,能听懂不,尤其是这个功能很厉害。校验,大家知道我们有一个表单的前台验证是不是啊,需要验证的。啊,里面包含了很多啊,表达像好来我们最好能找个例子跟我们差不多,诶搞一搞,其实这个就特别像。
01:01
他唯一多的就是这把这些去掉,把这个去掉就跟我们基本上一样了。所以应该怎么做啊?是吧,大家看好了,这个里面,这下面就是它的代码,可以给它展开是不是。那也就是说我们写这个结构是不是会引用到安利里面的这几个标签,这几个组件,是不是啊,来把它给它什么呢。引入来啊,给他引入一下。我们大家可以看一下,这个是那个整体那个表单是吧,这个是用来形成什么呢?Icon icon是个什么图标,图标谁来就左侧的这个看到了吗?能看到吧?啊我大概说一下啊,因为第一次用input,这个不用说那个输入框是不是按钮,更不用说是那个什么按钮,Button台好这一个我们最终有吗。我们需要这个吗?不需要,所以我们没有必要引入吧,啊,我们大家看一下。
02:03
没问题吧,没问题,好好下面继续,下面在这里面呢,我们把它的这一个form的部分给到什么呢。负责,甚至你把整个负载都都行,其实也没什么太大问题啊,那也就是说我们的这一部分。是不是应该是form?对不对啊,它里面呢,还这个标签的结构里面还写了一页GS,我们这个GS是用来去做表单验证收集数据的,我们先暂时不做,我们先做一个纯静态的,听懂了吧,好,那就把这些,把这些外面的这GS给他什么呢去掉,说白了就是在这个form里面套了一个什么。Input。能懂吧,啊大家最好大家不要现在就说老师,我我要一个要一个一个写,你先通过这个方式对它的使用熟悉起来,后面有你写的机会啊,你先出现效果再说好吧,好,那下面呢,是有一个第三个是一个八,这些都不要。
03:14
OK吧,来,我们现在先来看一下,看看他是一个什么样的样子啊,先看一下。是不是都快差不多了,能看到吧,啊,已然差不多了,是不是啊,这就是用主,你现在啊,一定要通过就这一下能感受到用主见的好处。这还没有交互啊,交互的时候更能看得出来,因为很多功能它都包装好了是不是啊好,但是我们需要去把那个样式呢,稍微调一调啊,其实这个就比较简单了,我们这个里面的文本以及它的这个宽度是不是应该充满的呀?啊充满那好说大家看的。
04:00
他给这个form是不是指定了一个类名,给这一个button也指定了一个类名,对不对,那我们是不是应该控制它的样式,这应该是谁?这应该是登录对吧?好,那很简单呐,我看一下啊,先找到它。也就是说在HR的下面。来加下面啊,再写点他,但是不是给他加,而是给谁加的,是不是给这个八加。这能听到不也非常的简单,无比简单一个事情干嘛100%。是吧,文字应该就是居中的,因为是按钮嘛,能听懂不?你来看一下能懂吧,跟上面的比一下,就是这个中间好像稍微距离近了一点,是吧。P了01:13次,给HR加个什么in?
05:01
20像素可以吧。差不多吧。实际上咱这这个界面就这么写出来了。啊,这个里面我们大概看一下他写了些什么啊,再回过来看一下整体先来了一个什么form,诶,这个form里面有一个on。Some,也就是我点提交的时候,是不是会调用它吗。是吧,啊,那我应该定义这个方法吧,这不提交表单的方法嘛,最终我是要在这个方法里面是发这请求去请求登录来,那我应该怎么做。电影。在这个孩子。而且应该是个什么箭头函数,而且大家要知道啊,事件回调函数里面应该有一个什么东西,是不是一问的,只是我如果不需要用的话,是不是就不写,但是如果需要用的话,是不是得写啊,要能懂啊,等会后面我们再做这个,我们现在只是说需要有这个看懂它啊好这个类型这没意思吗?后面每一个是不是都是form里面它又有一个值,你它里面包含了新的组件叫什么?
06:14
Item,诶,我可以这么写,以前可能没写过是不是,但有一种简化的写法。什么意思呢?我大写啊,不是说这种写法就一定多好,只是说大家有可能会见到别人这么写,我把form里面的item先取出来。听懂了吧,取出来之后呢,那我这边该怎么想。那直接写什么item。是不是写起来稍微简洁一些?当然,其实这种写法也行,是不是?能看到吧,你就这么写,你看它这个文档里面都这么写,说明这么写也是没有问题的,对不对啊好,这是这一个,但是这里要注意啊,这里它有一个要求。这一个东西啊,不能写在啊import之前,也就是说大家看好了啊,我现在肯定是没问题的。
07:15
没问题吧,啊,主要看有没有报错,是不是没有吧,好,但是如果我把它写在这里,就写在了某一个import之前,其实工具都发现了,是不是这个工具实际上是谁在检查说一下ES,这个e Li可不是我们这一个环境,我们这个项目的环境的ES,而是什么呢?而是Y多的ES,我们应该给它关掉。一般情况下我们会把它关掉,我们的打包环境里面有ES的检查,听懂了吧,啊ES。给他什么去掉na听懂了吧?啊,不仅有ES的,我们的还包含了什么呢?还把了GS。
08:01
也要给它去掉,哎,好去掉了是吧,不仅有还有接对不对,难受是不是。能看到吧,啊,如果啊,如果出现了刚才我说的,刚才是不是出现了红色的波浪线了,你应该把这个光标停在这个波浪线的上面,它就会提示能看出来哦,是GS的或者ES link。检查的问题啊,我们来看一下现在是不是出错了呀,他实际上在说什么呢?说你的这个你的这个操作代码,这个代码。啊。不能在什么import之前,它必须在什么呢?Import之后也应该是正常的一个逻辑,应该先全部引入,后面再处理,对不对?这种要求也是正常的要求吧,也算是正常要求啊,这个要注意。好,没问题,那接着啊,继续往下看啊,继续往下看啊,这里面有一个input是不是我的输入框啊,没什么,这一个是什么呢。
09:06
这些好懂。这个活动。能懂吗?这一个是什么?我怎么知道有这个东西呢?如果我要写的话,那我不写不了了吗?我应该看谁先。找谁去看?还看吗?不是得看谁,我得看input的。能听懂不?我得看input里面是不是能传这个属性,这个属性到底传什么东西,是不是好,那我就去干嘛。去找一下文档啊,在文档里面找到谁。An input。最好在一个新的页面打开。那input的能写雷东西,大家看到这不就是我们相关的一些呢,这是前面的,诶这好像跟我们那个是不是有点像啊,只是说我们我们那个前面是图片啊,这个是一个文本,是不是是很像的一个东西啊。
10:02
能懂不?嗯,看他用的,呃这个这个input,我们看一下他的input用的什么,呃,这个好像还跟我们那个不太一样,它叫什么?呃,I的on,什么before啊,我们啊看一下这个吧,就直接看有没有perfect就行,别看那么多了,先先暂时不看那么多,来家看是个什么perfect,带前缀什么图标的port的,而它的值可以写成一个什么,大家看看。是个什么节点吧?React节点是不是就可以写成一个?标签结构。能听到不,而现在用的是什么标签icon吧,那个icon能写什么?是不是要可以去看文档?也就是说这个太得是显示一个什么样子呢,我怎么知道呢,干嘛。一样啊,一样的,同理,是不是同理,我们去找一下什么icon。
11:06
这个icon呢,在最上面,其实。啊,打开它,打开我们这个icon来看一下icon icon,诶这个说提供了很多很多的icon图标,那我要比如说我要用这个图标,我怎么办呢。是不直接用大家看到复制的这个,我跟他写出来,你就看到了,看到这个了吗?太值是不是这个值,也就是说这个值能随便瞎写吗。不能是不是它特定的一些值,那这个优者对应的是什么样子,我怎么知道呢。是不是可以去搜索。是不是这个样子?能听懂不能好,那接着这个干嘛,这个是给我这个图标指定项,是指定它的颜色,也就是说现在变成了是个什么情况啊。这在说什么意思,是不是让那个我的那个图标是一个半透明或者1/4透明的一个图标啊,也就是说默认应该会怎么样,你可以试一试这东西吧,你把它一去是不是就得看看有什么变化没有,对不对?
12:16
啊,一看就看到这些是黑色呀。啊,你一般你你一半透明以后是不是或者四分一透明以后,是不是就像一个灰色的啊,就不那么凸显。啊,这是这一个,这一个我们用中文什么用户名,呃,这个是什么密码,那其他的这个就不用看了,这个太是吗。是不是帕的呀,啊,Pass好。But,没什么太好说的,Type,为什么这什么颜色?绿色,因为我们那个主题颜色已经改了吧,本来它是蓝色的对不对,但是我给它改成绿色了,好这个是什么东西。
13:00
大家知道,其实这个指定的效果是很大的,大家可以猜测一下。大家知道按钮两种按钮,一般的按钮和提交按钮,而现在指定的是一个什么提交按钮指定这个,不然的话这个不会触发。我们不是有一个有一个上面的吗。听懂我意思吧,这个按钮,这个提交按钮啊,Class name没什么好说的。整个就过完了,能不能看到啊来啊,那现在其实我们是不是就写好了一个概念叫静态组件,我们前面在组件化编程的时候,不有个概念叫静态组件吗。为什么没问题,嗯,行。
我来说两句