00:01
来。啊,刚才呢,我们就写好了这两个静态组件。下面呢,就要去做一些交互,这个交互有两个方面,一个是用户的一些操作的数据的收集,下一个就是后台交互了,对吧,那有后台交互的那部分呢,写起来比较麻烦,我们先来做一个简单的怎么样来把用户输入数据给它收集出来啊,我们先来做这个,其实跟前面没事啊。这几个数据的收集应该来说跟前面是一样的。不知道这个能不能懂,就是我们前面做过那个注册和登录的,对吧?啊,要收集他们的数据怎么做来着。看一看,找到我们的这个。但是我们要收集数据,我们当时是去设计了一个什么。初始化状态来收集数据啊,对吧?啊,这里面有哪些信息呢。
01:06
来这个老板里面呢,有一些信息看一下,找一下那个serve serve这边这个名字很关键,主要是来这几个数。都要用。也就是说,我来放到这里,只是啊,初始值开始了。都相当于是空串啊,看看有别的类型没有啊,这个也是职务职位,这个是相关的信息。这个是公司的名称,最后一个是什么呢?薪水对吧?啊薪水好,这个薪水一般会写多少K啊,就10K15K啊等等,好,那下面呢。我们要去收集数据的话,我们这个地方还记得当时需要去加一个什么监听吗?这一个我等会再做,头像的事情等会再做,我们先把这个简单的先做了,有一个监听叫什么叫UN change。
02:14
他是不是要指定回调函数,而且回调函数还接受一个参数叫什么value。啊,我直接就把那回答写这里。我之所以这么做,是为了能够将value传给我的事件处理的回调函数,好,我当时会写一个什么叫hand现跟前面的做法一样啊,跟前面做法只是我要传。出两个东西,一个是你要改变的是哪个属性。啊,招聘职位这个吧。值是多少呢?对吧,V对不对,好,那也说我是不是写它去。
03:02
把它写成这个跟前面是一样的,快速的写一下,接收一个类,接收一个value接着了,哎,这个地方应该写箭头是吧。记得。那这个怎么写吧,我要去干嘛,去更新状态。状态的属性名叫什么?这样吧,不是我要取的是什么name的值。跟前面一模一样啊好,那下面的情况啊,下面的几个就跟这个是什么呢?那就真的是差不多了,这一个是改变的是什么公式的名称,那公式的名称用的是这个属性名吧。
04:01
来,继续往下。职位薪资月薪多少钱是吧,好接着。最后一个这个要求就是一些说明的信息应付。好,这样我就可以进行什么呢数据的收集了,当我去点击这个按钮的时候。我是不是要调那个回函数啊,Z点假设就叫save啊,实是把我这个输入信息是不是给它保存起来,这个时候最终要发请求了,我们先简单的搞一下来吧,C接着等号括号箭头,我就打印输出一下。说谁呀?是为什么看一下是不是好来我们现在来去看一下我们当前的这一个情况啊,是一个什么样的情况啊,输入一下,呃,我现在就就大概输一下啊,输个abcd我也不是特别的啊,薪资倒是可以输个13K,嗯,啊,名称可以写个英文国外的名字,比如说Google google13K,这这太水了,嗯,那是什么工程师20好要求要求什么呢?比如说要求要求BU吧啊随便写一个啊。
05:38
好,接着点击保存。看看post。A,对吧,应该写一个什么前端工程师什么的,For company salary是不是都有?缺谁?Hanna。哎,老师为什么不去搞hand呢,对不对啊,Hand的主要是麻烦在哪呢?麻烦在他这个东西是在另外一个组件来去操作的。
06:06
我不把它封装成了一个pala主角吗?能不能,那也就是说状态是在负组件。对吧,但更新状态的这个行为,这个函数我得传过去吧。这个能不能听懂。啊来这个其实咱做过,以前做练习的做过这样事情,只是现在做的是一个具体的功能了,我是不是要去涉及到去改变它。给它设置一个值,但这一个对应的应该有一个函数。来,我来去写一下叫什么呢?就叫汉可以吧,好。啊写建函数啊,他指定义它,你想看他要接受什么。嗯。
07:01
接受什么?你射什么东西,你接什么?你STEM介绍什么?Name这个什么都不知道,你要设置name。你们干啥呢?接收什么好不用,那你下下面怎么写,你要设置一个名字,现在这个设置名实际上是更新,那个更新看的记得吧,那你怎么更新,那那你那你来写,你继续写,你继续写,你写写啥好汉子死了。对呀,你你设置焊的,那你不得焊的,那你不能传焊的吗。你设置A级,你设置内蒙,那不得传内吗。这个是一个非常固定的一一一些写法,那赛的方法里面你设置什么,那你就得传什么。
08:00
我本身是不知道是什么的,你传什么我就设置什么,对不对,这个实际上是去更新我的这个图,更新我就看你这个信息的,对吧,更新看状态的就是。可了,而这个函数呢,它我当前这个组件能调吗?没法调,是交给谁去调呢?交给他。能不懂,因为事件它我点的是点的这个组件里面的某一个元素,所以我应该怎么写是看的等于。是不是this是点是hand对吧?好,那我这一个组件啊,首先先得什么声明一下,是不是叫proper types pro proper没有还没下载过是吧,最好是吧,下载一下呗,这没什么难度,叫n PM in store杠杠c proper-X走啊就当它已经下载完了啊来下面我要干嘛去。
09:22
说明的对不对?Static proper types等于一个对象名字啊,名字叫set,来proper times点什么类型,Fun,接着is require就写好了,好啊,到时候识别一下就行啊,应该没问题,那下面我们就要说,我们当我们点击这个网格的某一个格的时候。这不是网格布局吗?点击它某一个格的时候,是不是就要去执行调用这个函数来指定那个头像的那个图片名称了?来看看吧,在这个地方我们得先看一下文档啊,文档里面如何来指定?
10:17
其实就是这个安利,这安利啊,它是点击每个菜单的回调函数,这个菜单实际上就是某一个单元格,懂不懂某一个单元格,而且呢,这个地方它会传给我一些参数,呃,传给我一个EL。是一个对象。E是什么意思?Element element是谁?哦啊,实际上是数据的element,数据不是数组吗?Element翻译过来是不是元素啊,不是标签元素,而是数组元素。能不懂数组元素,那你想数组元素不就是这个对象吗?那个对象里面是不是有icon和text,懂吧,好,来啊,来看一下,那也就是说我们在这里面要去搞一个什么等于。
11:23
This点比如说我就叫hand吧,可以吗?处理点击吗?啊,我们这一个除了做这个行为,其实还有一个显示的问题要去做来什么意思啊,等会啊大家来看一下这个这个是一个什么意思呢?这个就是我们这个地方一定是这个吗?不一定是会变的对不对,能不懂大家看看一下你就知道了,你看我要不选择的时候是是请啊选择头像对不对那。
12:03
一旦我选择之后呢,那我是不是要显示另外一个文本,并且把头像显示出来,就要显示头像是不是需要一个image。需要吧,需要好。Image要想显示出来是不是需要有一个,需要有一个icon吧。对吧。能懂吗?I看啊icon也就是说一个什么意思啊,我们这个地方啊,其实需要有一个状态。需要有一个状态,因为有一个变化的东西,就是那个图片,我选择什么就会变什么,对吧,只是初始值,它是没有值的。不知道这个能不能懂啊,这里面我就定义来看,开始是什么呢?这是图片对象,所以它是个浪子,这是图片对象,记住啊,其实我的这个数组里面是不是包含很多图片对象啊,这每一个都是个图,大家看每一个都是图片对象。
13:01
能不能,只是我还没选开始有什么?没有默认是没有知道能懂不,而我在显示的时候,先别说这个啊,我们在显示的时候啊,看到这里这个不能这么写。不能这么解释了。那得干嘛呢?你得去读这个词对吧,你去读它,说白了就写一个this.state点它,它有值有值吗?对吧?有值是选这个吗?不是没有值才显示这个对不?那我就在这里面加个飞吧,可以吧,没有资显示这个,否则。显示的是一个文本加一个image对不对,所以啊,这个时候啊,这个时候需要用一个用一个div给它们包起来。
14:03
这个能不能也就是说我此时会返回一个容啊,一个标签结构整体呢?假设举个例子啊,是一个div对吧?Div里面不有一个新的文本吗?或者是个P,它这里面都行对吧,一个意思能不懂好,那里面还需要用一个什么呢?Image来去显示啊,这里面需要一个结束标签是吧?接着src等于一个什么呢。是不是等于这个icon。就是这个值嘛,就是这个值嘛,对吧,但这么写的有点啰嗦吗?是吧,不是用SSA不就是这个值吗。我到时候这个存的值就是一个图片对象。那关这么写,有的有的同步应该先干嘛呀,先定一个变量啊,这里面是个常量啊等于。
15:07
This state,你接着你可以在这里面写个大括号是吧?真的吧,啊,这个是咱经常做嘛,那里面是不是就稍微简单一些。那么呢,如果这个IPA没有,这显示这样一个文本就可以,否则显示这样一个div div里包含两个部分,一个是文本,一个什么。你卖。能理解吧,那后面啊,后面大家看到我,当我去点击某一项的时候。点击某一项的时候,其实我要做两件事情。我要不要去更新状态,不更新状态界面怎么写出来对不对,我要不要去调色看的是不是也要啊,要做两个方面啊,这一个汉的这一个他接收的有一个什么呢?就是E。
16:07
易阳是谁啊?是这个数组的某一个元素,哪个元素你点的那个元素,而这个元素实际上什么类型?对象,而这个对象里面有什么泰和什么还诶我可以这么写。看没看到他的参数不是一个不是一个的对象吗?我结构啊。这种一定要掌握,嗯,好,那下面呢,我们的事情就很简单了,我们要更新状态对不对,更新当前组件状态啊,更新当前组件状态,接着还要调用啊函数更新副组件状态,这能不懂。
17:04
能懂吗?啊,我要更新当前自己的状态,很简单,This set state,我里面有一个什么样的状态icon对吧?我要更新复数原称态,干嘛去调用set hand啊?怎么写this点点它括号传什么?他需要的是一个什么,是不是我那个头像的名称,头像名称是谁呢?就是这个呀。我在数据库里面保存的就是这个文本,因为有了这个文本,我就能知道那个头像是个什么样的头像,因为这个里面变来变去,不就是大家看的这个一麦几,就这个名称在变吗?能不能看到啊?那现在我们相当于就把整个写好了,我们来看一下啊。
18:02
看一下我们的。现在是不是显示的,请选择头像,下步干嘛去点。蝶。对吧,再接着来看啊,我这边我这里也不说了。有没有有,是不是已经有了。搞定,当然你不点击我能不能看出来到底有没有数据。我怎么看,我不点这个按钮,我也想知道这个头像吧,这个按钮值已经有了。React。这个很关键,看组件的属性啊,状态啊。你不爱你看什么去?你除了看这个,你还有别的能看的吗?我就奇怪奇怪了。啊,就是有的时候要切换一下啊,来找到我们的这个组件大家看啊,首先可以看一下这个hand select,这不是我们select吗?对吧,这里面就来看实际上存的是一个什么呢?大家看的是个什么?是那个头像的贝斯六四编码以后的结果,因为这是小图片嘛,他都已经进行了被十六四的一个图片处理,对吧?啊,他已经帮我们处理好了,接着看一下这个。
19:26
呃,它大家看一下看。是有知啊,这个大家看看是不是要改,通过它来看这个一定要会看这个工具啊,工具一定要知道干嘛。好,那也就是说我们现在啊,收集数据就这么搞定了,那其实我们现在做的是那个。啊,老板的这个是吧,那我们去做另外一个。什么意思,如法炮制一样的呀。
20:00
老不就是我们现在做它,其实就是把这个里面呢。这里面的这几个这几行代码拷过来。啊,改在这里稍微改改名字,看看哪些名字需要改啊,这个有这么多吗?没有看看他有什么。啊,头像肯定有对吧,那个就是老呃,就叫什么大神阴佛是吧,这个地方有头像啊,还有什么职位和个人介绍,职位,这是职位个人介绍,那就是没有工资和什么公司,把这两个去掉。能看到不好,接着我们这个还是一样的,没有一点任何变化,接着我的这个也是一样的,没有任何变化,这个C也还是一样的,没有任何变化。下面这里。
21:01
啊,这里面是有一个求职岗位和个人介绍,其实啊,就是跟我们的这一个。把这个。拿过来,拿过来以后呢,稍微的改一下名称就可以。大家看一下我们现在改改一些什么呢?大家看到我啊,那很简单,就是改一下这个里面呢,这个。啊,请输入求职岗位对吧?啊,接着这里面就是求职岗位,请输入个人介绍,请输入啊,这人就是个人介绍,把这两个干掉。这个还是同样的名字吧,还是同样的名字啊,因为用的是同一个集合。用的是同一个接口。
22:00
那也就是说现在我们的这个就也写好了。稍微看一下是吧,稍微的去看一下,看看行不行啊,先看一下来选择可不可以可以吧,当然我们同时还可以去看数据啊,我就我就点这个点这个按钮就得了啊。哎。点个按钮,这个按钮还没有,还没有写安吧,这个按钮是吧,On click等于this点。什么C,我不有一个吗?有吧,来看一看啊,选择点它是不是头像,选择另外一个点它是不是头像九啊这边吧,接着把这里面也输一输啊,我就随便输个a ABB啊。妯娌有没有有,诶这里还有一个,还有一个东西叫。
23:01
In啊in for,诶这个地方改错了啊,这个不叫company的对不对啊,我叫就这一个。叫in for,那这样上一个写对了吗?看一下。公司名称啊,这个对的对吧,那也就是说,诶这个说一下这个看一下这个个人介绍,他也应该是个多行的才对。能不懂应该多行的才对啊,那也就是说我们这个地方应该是有一个他啊这简单。就有个他啊,而不是上面这个是吧,看到吧,那就这个是个人介绍。是吧,三这个是固定的,这个是应付,把这个给他什么干掉就行。嗯。好,这个地方我们应该是一个他没有引路吧。
24:03
另外呢啊,他们引入进来,这不是个人介绍吗。好,下面来来试一下走你嗯,输入一个AA,输入一个BB,走你有没有一定要看一个看数据是不是我们输入的数据,再一个看那个名字对不对,In post以及hand。没问题吧?那后面我们要做的事情就是点击这个保存以后。就要进行整个一系列的前后台交互的处理。嗯,这个应该这前面都难度不大啊,重点难度的是在后面的部分。行。
我来说两句