00:00
下面我要做一个简单的交互,什么简单交互呢?我点击这一个注册。我要能够提示出来我输入的信息。这能懂吗?啊,现在肯定不行,说白了就是我要收集表单数据。对不对,我要把这数据收集出来,那数据怎么收集了啊,先说我要给他,是不是要加点击监听。这个好做吧,这个应该是好做的,也就是说这个按钮哪一个什么on click等于this的。就叫re吧。可以吗?注册吗?那好了,那我们这里面该怎么做呢?那太简单了。是不是这样好,下面我们要去说啊,如何来收集数据的啊,这个地方它有它的一个方式,我们来看一下,看一下这个文档,在这个文档主要看一下那个input item。
01:05
Input item里面有一个非常重要的一个监听,叫unchang。听到不就unchang,而且它的这个unchang会将它最新的值传给你,这个非常好。能懂吧,我是不是就需要收集这个值。这一下他其实原生的不在那,原生的没做这么好,原生的得自己去想办法去收集这个值太麻烦,他已经把这个值传给你了。能听懂吧,好,那我们这一次怎么做呢?大家看到我一共是不是有这么几项要收集,那我可以这么做,我就去弄一个state。来去保存收集的数据,那后面我是不是读state里面的数据不就得了吗?听懂吗?嗯,好,来在这个地方啊,我有哪些呢。
02:07
User这个用户名吗?还有一些别的吧,啊还有别的来我们来说说还有一些什么呢?呃,下一个是呃密码。就搞password,我们这次搞的详细点,呃,跟password对,还有一个确认密码,我就来个password啊可以吧啊,这个是密码啊,下一个是确认密码。没问题吧,好,最后还有一个用户的一个类型吧,类型怎么说。Type,对,很好啊。啊,用户类型,哎,烦死了,类型名称。好说一下,我这里面有两种用户类型是固定的,那个名称是固定的,一个叫大神啊,一个叫什么呢,老板。
03:10
能听懂吧,能听懂,那下面我们的工作是不是就要去通过那个on嵌监听来收集数据。对不对,好来先来一个再说啊,我们这个他。说需要一个什么on陷阱,等于这里面是不是要指定一个回调函数,而且这个回调函数还接收一个什么value。啊,接收一个value,而且每一个是不是都是在哪。他们唯一变化的是什么?就更新的那个指定的那个名字不一样,就更新的这个名字,一个是更新user name的一个更新什么pass word。是吧,哎,是一个什么意思呢?大家看着我啊,大家看着啊,我是这样一个意思,也就是说这里面我可以主动的去写一个函数,可以不。
04:09
可以吧,那也就是说当我去输入改变的时候,是不是它就会掉。是吧,把Y6我是不是介绍过来了。那里面我干嘛去,应该更新状态去对不对,那我在这里面更新哪个装备属性user name,那下面的大家看到下面的跟我这个什么一样,只是它更新的是什么passwor。是一个什么意思,大家看我写,看看大家能不能懂啊,我写一下,看看能不能懂,我写一个this.hand change。我这里面可以掉,我传什么呢。好,那也就是说我这个下面也是这么写啊,来这一个也是这么写,只是我需要改个东西,改个什么呢?Password,甚至于我下面的。
05:20
我下面的这一个确认密码,只需要把它改为R。包括我的到时候我的这里啊,我的这里啊,等会我再来做下面这个啊,我们先把上面的三个字完成,那你说我现在是不是要定义这个方法去是吧,定义这个三啊,这个方法来啊定一下。好,这一个方法要不要定义参数,要必须要有参数,而且需要两个参数对吧?第一个指定的是什么?是不是要更新的属性的名字,那我讲一下叫他name可以吧,这个name是user name吗?不是,是属性零对不对?接着是什么value?
06:09
是不是这意思,那我要根据它指定参数,是不是最终去干嘛去更新状态是吧?Z时间是么?Set是这关键更新哪个状态了,更新是不是这一个的状态,说白了看啊往下写,看看大家觉得对不对。对吗?不对,为什么不对,我的这个更新状态的这个属性名吧,不是A,而是这个变量的值。这就是麻烦事。能懂我意思吧,我这么写的,我更新哪个状态NF这类,我有这个属性吗?我都没有。
07:01
懂不懂意思啊,这个地方叫处理啊,数据的改变,输入数据的改变啊,输入数据的什么呢?改变,能不看到这个改变最终要干嘛去更新对应的状态,记住了是对应的,这个对应是怎么对应起来的?是name值,这个name这个变量的值。这个怎么办呀,这个没学过的,我现在这么写,相当于它是个字符串吧,但是我希望它是个什么,我希望它是个变量,是不是小法,我希望它是个变量,那就能对应起来,怎么让它是个变量呢?这样的当没用过。把它放到一个中框里面,这个时候它就不是一个串了,它是个变量,你说老师这是个速度,不是,这是它的特有语法啊,这JS里面特有语法啊。
08:03
这没有什么为什么啊,就是一个语法,就好像为什么要用Y定义变量,为什么要抗定义常量对吧,就是设计好的。因为属性名默认它是个周串对吧,但我现在希望它是个什么变量,而我的属性名最终是不是这个变量的值啊,能不懂。嗯,这个要注意啊,属性名不是Nam,呃,是什么呢?NM的值。能理解吧,来啊。好,那也就是说我通过一个方法是不是搞定了这三个呀,是吧,对的啊,好,那下面这一个该怎么用呢?我就不去查问了,我就直接跟大家说了啊,这个也是有一个,它也有一个安千,只是这一个安嵌体,他是不会去给你传职的啊,我一样可以一样可以做啊,一样可以做。
09:13
那我在这里面去干什么呢?我也不用大括号,其实完全可以不用写,也可以去调用这个汉的陷阱。你说我要去改变哪个属性。哪个泰国呀,我的值是多少呢?我的值是多少,当我选中的时候,那个。都不是大神嘛。好像应该是一个点击吧,我还要看一下啊,是安全还是点击我的,我得看一下他的,这个别自己瞎猜了,来一个radio看一下文档。呃,他还有一个安全是吧。能看到吧,有个UN change,呃,On change这个地方啊,先先记用安change再说啊,On change啊里面是一个word,这个word代表是没有啊,这里没有别的参数,只穿了一个什么,可以穿一个一,应该是个一吧,估计有可能是啊,现在不用管它,我们看我们这个行不行,呃,下面我们继续往下面去看啊,往下面看我还没有写完下一个下一个下一个下一个下一个下一个。
10:26
哎,这个把它整体拿过来吧,整体拿过来就行,是不是把它稍微改一改,把Y改一下啊老板是吧,还一个我一上来是不是又一个选中的问题。就我做radio,你想想看,我一上来我是什么初始值,应该指定的值最好,对不对,比如说啊上来老板可以吧,那也就说上来是不是选中老板,那怎么样代表谁选中呢?看下文档,文档里面其实有说明的,有一个什么check的属性,而这个check的属性什么类型薄类型,这个调整to就是选中呗,那也就是说我应该有一个check的属性,等于等于什么啊或者过程,那你是错,或者关键是你不能自已写死啊,对吧,你得去判断对不对,判断什么呢?我是不是要读这一个值。
11:28
是吧,那我先读出来吧,假设我先读出来this列读出来了吧,接着就判断这个值啊,应该好写,等不等于。大神。是这意思吗?接着看他等不等于什么老板没问题吧?来看一看我们的情况,这不上来老板选中了吗?你怎么说都是老板选中,为什么?
12:02
因为我的初始值是固定的,是不是好接着点一下它可不可以可以。同时诶,下一个很关键,我要去看我收集的数据到底对不对,对不对啊,你可以打印输出啊,这是一个方面啊,我这我要打印输出所有数据,我该怎么办。太简单了,this.state啊,不取了,就这样。就包含所有数据吗?可以吧,可以啊,那也就是说我点大家看我操作一下点一下。是不是当我去输入啊,其实最好是看一下这个,这个挺关键。切到我们这里来,你看没过去再切一下,诶过来了吧,过来看谁了,看这一个啊,大家看看,注意这里啊,我在输的过程中啊,输入一个A有没有变化,有输入密码123。
13:09
有用化啊,输入一个三有用化,有,那你点多时那肯定是。有值的呀。没问题吧,嗯,这样我们就能够去啊收集数据了,对吧。好,最后做一个,我们就让大家自己做了,哪一个呢?我点击它需要跳转进入我们的什么登录界面,这个非常好做,其实啊怎么做首先要在点击监听。这是必然的是吧?来什么呢?On click等于。我们现在是不是要通过编码的方式来实现路由的跳转呢?还记得要用哪个对象啊?啊,首先啊,黑色在哪个里面呢。
14:04
黑水在哪个里面啊,不行我们就去啊,需要去看点东西啊,这里面已经也报错了,我因为我这里面要指定指定指定一点东西才行啊看因为大家不知道,所以我就让大家先看一看,没关系啊,记不住没关系诶啊我们来看一下,打开我们的这个主键啊。啊,接着呢,看到我们的这个组件,我们打开我们的看一下这里,我们这里面就有这几个数据,Prop里面就有一个非常重要的属性,叫什么呢?History,而黑水里面有方法两个,一个叫push,一个叫replace。这个工具不能忘啊,你可以忘掉那些语法都没有关系。那你说我现在该怎么办?On等于假设我来一个函数啊,叫this点嗯,To或者叫to什么呢?To我们现在应该进入登录页面是吧?To login可以吧?那to login我在这里面是不是就需要去写一个对应的回调函数事件回调函数啊,对吧,好。
15:21
怎么做?This很好,History好,可以用push replace,大家可以想一想用哪个稍微合适一些,对不对啊,Replace好一点嘛,就比让他回退了,他可以点那个还未有账号来过来,他还可以过来的replace。那么呢,指定一个什么路径就是什么。你弄吧。嗯,那下面我们就可以看到,我点击它,诶,就进入了登录界面,我登录界面是不是也有一个按钮能够进入注册界面。
16:04
应该有吧,嗯,其实是一个意思,那我现在能过去吗?过不去了,看到了吧,啊,我点一下过不去了,之所以过不去就是因为我们刚才用的什么replace替换了。没问题吧,没问题,那其实这样一个做完以后,我们那个登录界面跟这个一样的,其实稍微改一改,很快就能做完,这个呢,我就不大家一点一点做了。
我来说两句