00:00
好了各位,那在这一小节呢,我们学习一下在react中呢,如何收集表单中的数据,其实主要是想给大家讲两个概念,一个叫做受控组件,一个叫做非受控组件。现在呢,你先别纠结老师,受控怎么理解呀,受到谁的控制了呀,先别想这事儿,这只是两个概念而已,接下来我带着你把受控的代码写一写,再把非受控的代码写一写,然后我再告诉你同学,这样这样这样的就是受控的,那样那样那样的就是非受控的,明白了吧,只是两个概念而已,同学先别在这纠结,我们看一下我们要做那个案例啊,读一读需求来定义一个包含什么呀,表单的组件,没有表单我怎么收集表单数据嘛?啊再往下读,输入用户名和密码之后呢,点击登录之后呢,就能提示你刚才所输入的信息,动态图的演示呢,就在这儿。首先页面里边有一个表单啊,然后呢,有用户名的输入项和密码的输入项,当你输入完用户名和密码,点击登录的时候呢,会有一个弹窗提示,那我们看一下456密码啊,点击你看用户名是123,密码是456,哎,就这么一个简单的小效果,好把案例呢关掉,我们回到代码当中去完成它。文件夹呢,我已经建立好了,10REACT中的收集表单,数据文件也建立好了,叫做一非受控组件,说了先别想这概念,我们先敲代码啊,固定的结构都写好了来第一步呢,肯定是创建组件,走创建组件给你的组件起个名字吧,同学,他有用户名,它还有密码,所以说呢,它应该叫做一个login组件,诶,登录的对吧,你叫别的当然也可以啊,集成react第二,Component,嗯,诶,Component,走render得写吧返回,值得有吧多几。
01:55
再写给我报小括号吧,这回呢,咱可不写div了啊,因为整体呢,它是一个form表单走,我一写form Vs code呢,自动联想出来,让我写action属性,Action属性是干嘛的呀?同学还记得吗?你表单最终是不是得提交啊?那你表单提交给谁是不是得写上啊?哎,那我们随便写一个地址啊,写哪个呢?写我们学校的官网吧,嗯。
02:20
好,那表单里边得有输入项啊,走着走着,第一个是用户名的,写一个input框,那再来一个叫做密码的,它俩呢都得闭合,既然是密码呢,这就不能用text password,密码前边呢,加上文字的提示用户名,嗯,那下边这呢叫做密码,好表单里面得有一个登录按钮,所以说写一个button,嗯,叫做登录,好表单呢就定义完了啊,那接下来呢,是不是渲染一下包含表单的这个组件呀?啊,写好了渲染组件react DOM render,渲染谁呢?Login容器里边,嗯,来我们看一下啊走。
03:15
哎,东西出来了,有用户名吧,用密码吧,OK,输入用户名123,输入密码456,接下来我点击登录的时候呀,你注意观察,同学,你看看这个页面往哪儿跳啊,点击登录。是不是来到了我们学校的官网啊?同学注意观察,后边带了一个问号,什么意思呀?同学,回到代码当中,你是不是说了呀,表单要往这儿提交啊?哎,那同学我问一下,如果你不指定请求方式的话,Form表单发出去的请求默认是不是get请求,而且默认带着参数,是不是我们所说的query参数,对吧?那问题是参数呢?问号确实是,哎,携带query参数的一种形式,但是我的用户名呢?我的密码呢?为什么没了呀?哎,回到代码当中,是因为你残缺了一些东西,用户名和密码这种input框里边,你是不是得写一个name属性啊,这叫做username,那这块还得再补一个nameme,那这个name就叫做password,说老师,这是react里边规定的,不是同学啊,原生是不是就有这个写法啊?哎,所以说千万别遗忘之前的知识啊。好了,说老师,那这回就行了,是的,你看一下,打开输入用户名是123,密码是456,接下来你点击登录来同学是不是跳转到了表单提交的那个地址啊。
04:45
而且带着什么东西过去的,是不是你所写的username和password呀,那你看这是什么参数啊,是不是query参数,好的啊同学,但是我不光说让这个表单跳转啊,这不是我的最终目的,我想提示一下表单里的数据对不对,一个用户名,一个密码,那怎么办呀?
05:05
说老师那简单呀,我给按钮绑定一个click事件,然后给用户名打个ref,给密码打个ref,然后回头通过ref拿到这两个节点的输入值不就可以了吗?那当然这么写也行,但是你现在都已经写表单了,就没有必要单独给这个按钮绑定什么事件了,大家都知道原生里面表单有一个事件叫做on submit,就是当表单提交的时候,对吧,那在react里面呢,也有这个,只不过呢,把这S大写,咱之前说了这个事件处理对吧?人家重写了一套好了,等于,那这怎么写呀,给他一个回调呗,当表单提交的时候,你去帮我调这个回调,来我们写一下,呃,起个名字吧,我就叫这个名字了啊。什么意思呢?Handle呢,本身就有处理的意思,Submit呢,就有提交的意思,Handle submit就是响应这次提交,处理这次提交,那复制不能光说你得有啊,走是吧,同学,哎,事件的回调直接this点复值语句加箭头函数得呼吸般自然就把它写出来啊啊好了,那这怎么办呀,说老师那就提示数据嘛,那我们就写一写吧,你想提示谁呀?同学用户名还有密码。
06:20
同学,表单在提交的时候,然后去展示用户名输入框和密码输入框的值对吗?同学,给谁绑定的on submit给表单,但是我却要拿到谁的值呢?用户名和密码,那你觉不觉得这个时候你就不能用咱们之前所学的那种形式,什么event.target因为event target指的是这个form表单,而不是里边的输入框,对吗?那你没办法了,就得给这两个输入框,是不是打ref呀?啊来走着,那说老师你写哪种形式呢?我先写那个回调的形式,好吧,哎,直接写C,然后呢,箭头函数this.username然后等于C,那你这呢,得改一下是吧,不能叫usernamename了,这叫password。好同学,那你说我这么一写不要紧,在这个老给组件的实例身上是不是加了一个username,加了一个password,而且呢,都表达这个节点和这个节点对吧?那你想提示他俩里边的值,那当然就得第一步,你是不是得获取节点呀?哎,从哪啊?This身上获取谁呢?Username还有谁呢?那当然就是password,直接复制往这一写。
07:28
好,那这两个拿到了之后说老师那就弹窗展示吧,行,咱先试试啊,同学,我先弹一下username,咱们试试看看它能不能行啊,右键打开,输入用户名呢是123,输入密码呢是456,点击登录,哎呦,V出事了,同学,这也不是我所输入的123呢,它提示的是什么object HTML input element,什么input节点,同学,那是因为你犯错误了,很多同学在这儿都犯错误了,同学。
08:00
哪错了呀?你挂在组件实例自身的是username username是什么呀?是用户名这个输入框的这个节点,你要提示的是它的,诶value值OK,好,那右键呢,我们打开。好,这回再试试啊,输入123啊,输入456,点击登录,是不是123出来了,老师这不就结了吗?你再接着往下写,再把密码也写完不就得了吗?啊,那好像是的哈,那咱们写着吧,我alert呢是一句话对吧?同学我用模板字符串去写啊,叫做你输入的用户名是什么什么什么诶再来个逗号,你输入的密码是嗯什么什么什么好了,写着么,把这叉叉叉呢给它换一下,到了符花括号谁呢?username.value这呢也得换。删掉到了符画括号,那就是password.value好,那右键打开我们看一下效果啊,输入用户名是123,同学们密码是456,点击登录,OK,是不是提示你所输入的数据了呀,说老师好嘞,这功能完成了,哎呦喂,别急别急啊兄弟别急,我点一下确定,你发现它就有点儿小问题。
09:24
老师,啥问题呢?这表单提交嘛,本来就往这提交嘛,那说一下同学,有一个技术呢,大家肯定是学过的了,就是adjust。同学,这个东西最大的优势是不是就是页面无刷新获取数据?同学,我们怎么了?为什么这么喜欢页面无刷新呢?为什么总想让页面按兵不动呢?那是因为啊,咱们对这个用户体验的要求越来越,怎么说呢,越来越高啊,就不希望啊你这个网页点一点点一点它就来回来回抖,想让页面里一切的交互呢,都有一种感觉,页面诶整体是不刷新的,然后呢,他再跟你互动,所以说我们接下来的目的就是输入完123456之后,点击登录,确实得给我提示一下这个。
10:08
但是我不想让表单真正的处罚提交,也就是说我点完确定之后,我不想让他再往这跳了,说老师那你什么意思呢?你这么写这表单不就废了吗?同学,听我说我是这个意思,123和456在这一步你是不是已经拿到了,我可以单独写一个adjust,把这些数据送给后台,那这样的话优势就在于页面它就不动了,如果你非得用表单这种形式提过去,同学,那表单提交默认是不是引发页面的跳转啊?哎,所以说怎么能阻止表单往那个页面里边跳呢?说老师简单呀,你别给他配地址不就得了吗?我不配就行吗?试试吧,右键打开,输入123,输入456,同学,什么叫页面没有刷新呀,这里边没有转,这个地址还是之前这个地址对吗?里边的数据还是这些数据对吗?
11:03
你刚才只是把action属性删掉了,那你点击登录你试试呗,同学走啊,说老师有这提示,对来接下来再看同学这刷了一下,对吧,你仔细看刚才这转了一下,而且你看你看这干嘛呢?表单是不是处罚提交了呀,那你看数据呢,是不是也没了呀?哎,说老师那怎么能禁止这件事呢?说一下啊,同学删掉action呢,不能解决问题,其实表单提交啊,是一个默认的动作,所以说我们利用原生的阻止默认事件就可以了,那怎么阻止啊,在这儿呢,接到一个event I叫事件对象调用event身上的一个东西,叫做prevent default,是不是就阻止默认事件呢?哎,写好了叫做阻止,哎,表单呢,提交,其实你的表单没有真正的提交,你确实触发了submit,但是到这一句话的时候,诶它就停住了是吧?哎,那我们这回呢,再看一下输入呢123输入呢456点击登录,OK,提示你的东西。
12:03
把点击确定,你看按兵不动,页面也不刷新,依然停留在这儿,我们整个都靠adjust进行交互,好吧,说老师,那你写了这么多表单数据,你这也收集完了,那你想给我讲的东西呢?你不是说在讲非受控组件吗?那同学我告诉你啊,我就已经写完了一个非受控的组件,哎,那这个时候同学可能说老师,呵呵了,你这怎么叫什么叫非受控吗?我这怎么记吗?同学注意观察啊,页面里边有没有表单?有,那我再问大家有几个输入项,两个,那我再问你这两个输入项的值我是什么时候给它获取出来的,是不是当你点击登录按钮的时候。也就是说,像你这种写的形式,同学注意了。表单中输入类do的值,我可没说input框,所有输入类的do都算,你比如说check box,你比如说radio,那这种单选啊,多选啊,这种都属于输入类的盗墓,页面中所有输入类的盗墓。
13:08
你是现用现取。那你就是非受控组件,说老师没明白啥叫现用现取,你是不是点了登录啊啊,那是不是走了这个回调handle submit呀啊那你这干嘛呢?取节点呀,那你这又在干嘛呀,取节点的点value值啊,那你这就属于现用现取这小节呢,我们先停一下,因为我们只是写了一个非受控组件,一句话啊,同学现用现取哦,视频停。
我来说两句