00:00
React事件之后,诶,我们接下来学习收集表单数据,那其实收集表单数据我们主要是为了弄清两个概念,一个是受控组件,一个是非受控组件,哎,当然在这个手册上面也有说明啊,在这里。对吧,在这个指引里面,非受控组件啊,还有非受控组件以及这个受控组件啊,当然官网的这个首次的它的这个说明,还有这个例子比较多啊,当然这两个概念怎么去解释呢?大家不要懵,我们自己来写一下例子,大家一看就知道怎么回事了啊,我们一写一对比就知道什么是受控组件,什么是非受控组件,来那我们来写一个什么例子呢?看一下啊,就是这个例子,哎,我们有一个。呃,用户名密码,哎,当我们输入用户名和密码的时候,在我们点击登录的时候,可以拿到这个用户名和密码,诶注意我们在拿到这个用户名和密码之后,诶,这个表单它是没有进行跳转和提交的,好,这次要注意点,那我们接下来开始写我们的例子。
01:01
首先哎,需要准备的文件我已经准备好了,就是该引入的内容都引入好了,那第一个就是首先是创建组件,对吧,创建组件。好,我们来。创建一个登录的一个组件,要继承react。第二,Component。软点。这里面哎,写我们的代码啊,我们首先有一个这个form表单包裹,对吧,那我们把这个form表单作为这个最外层的元素啊,因为最外层我们只有只能有一个根元素嘛,那里面开始写我们的输入项。有一个用户名,哎,加上影付。
02:01
单标签要闭合啊,Type是text。给个B2换行,哎,接着写一下密码。脸谱的。他做的。再给一个换行,然后是我们的一个提交按钮。来看一下啊,是提交还是登录登录。把这里改改。我们的组件哎,就定义完成了,接下来第二步。渲染坐下来到页面。Break down render。嗯,第一个是我们的组件,第二个参数是叫。挂载到哪个容器开始这个啊。
03:05
刷新运行一下。诶,我们的页面已经有了,诶接下来我们就是要把它给。嗯。数据给收集到,那现在我们点的话呢,它是会提交这个数据对不对?好,因为这个form呢,它有一个这个action属性。也就是我们表单数据要提交的一个地址,那我们比如把它提交到这个百度啊,啊,它还有一个这个method是不是,如果我们不写的话,默认是使用get方式,那我们这里就使用get吧,好嗯。这个例子,哎,这时候I我们就写完了,我们再来看一下啊,也是这时候我们去输入这个数据的话,它就会干什么,会提交这个数据。诶,到这个百度,诶,但是呃呃可以看到啊,我们是提交数据到百度的,但是问号后面没有数据啊,因为我们如果以这个get方式去传这个参数的话,来提交这个表单的话,因为我们没有写这个method嘛,它默认使用get,那么它就会以这个query传参的形式把这个数据附加到这个地址后面,哎,有问号加这块RY,但是现在没有对吧?没有是因为什么你没有写这个。
04:12
那name幕就是我们的表单,一定要有name,我们的数据才能提交到后台,知道吧,就是在我们进行提交的时候,如果是没有name的这种,呃,输入框的话,表达法它会给我们就自动忽略掉。来把name都给上,哎,第一个user name,第二个password,好,这个时候。嗯,我们在这里重新运行一下啊。这时候我们再来提交数据。诶可以看到提交到了百度这个地址,并且问号后,后面我们这个参数都带着呢,对吧?好,但是诶这并不是我们想要的一个效果,哎,我们想要的效果是我们点完之后直接就把数据输入数据拿到了,对吧,它页面它不跳转。对不对,那我们这个明显不对,我们的页面都跳转了啊,我们先把那个关掉,那你哎可能就想到那我这个action我不给不给也是一样的啊,你不给的话,它是提交到了当前地址。
05:08
清楚了吧,我来运行你看。嗯,这个是我们当前的这个地址对不对?哎,那我如果我把I去掉,它是提交到哪呢?它是提交到当前的地址,可以看到这里也刷新了对吧,并且把参数给我们附责附到这里,哎,所以也是不符合我们的这个需求。那怎么办啊,大家可能就想到了,哎,我在。给这个button啊,一个点击事件,当我这个点击这个button的时候啊,我这边写个事件函数,我去啊通过ref去绑定这个user name,再绑定一个ref,绑定这个passwd,我去这样去获取这个值是吧?啊好。哎,当然可以,但是没必要这么麻烦,那我们form它自己是不是就有一个事件。啊,我们form是不是有这个on submit的事件,就在提交表单的时候会触发这个on submit事件,对吧?那我们为什么不直接用这个on submit的事件呢?为什么要再多此一举给他写这个点击事件呢?来啊,Sub,哎,注意这个S大写来它呢,要执行我们类里面的一个方法啊,那我们先写上,哎。
06:10
哎,Handle处理啊,处理什么处理submit。好,那这个方法,当然这个方法没有,我们现在再来这里定义啊,处理表单提交。在这定一下这个方法处理表单提交,哎,这个方法。哎,注意一定要用赋值语句加这个箭头函数,这个你要能很自然的去写出来。对吧。来。那这个时候也就说当我们提交表单的时候,就会触发啊,这个昂萨波米的事件,哎,就会调用这个回调函数啊,在这个回调函数里面,哎,我们去。嗯,获取到这几个输入框的值进行弹窗就可以了,是吧?好,那我们要获取这个输入框的值,我们是不是要给他写ref,那我们ref在开发中比较简单的写法是什么呢?直接写这个内联的回调函数对不对啊,接着也是帮大家复习一波啊,那我们来写内联的回调函数来直接C指向哎,Z是点。
07:13
优色内给这个实例啊,直接绑定个优色内幕属性,让它等于谁等于这个C对吧,这个C是谁,C是这个if传给我们的当前的这个道母节点嘛,对不对啊,那接着我们来写第二个ref,等于把这个删掉啊。嗯,大括号C指向这个this,这样user他多的啊,不能写重了,哎,我这是一种哎简写的方式,让它也等于这个C,哎,我们给这两个输入框绑完这个if之后,那我们再进行提交的时候,就触发这个on萨波命的事件,哎,会触发这个回调函数,在这个回调函数里面我们就可以去拿到啊,我们提前绑在实例上的这个。
08:00
呃,到节点对吧,来我们来alert一下啊,Alert什么呢?那我们先获取到吧,比如说light,哎,User侧name user nameme啊,Passwor,我们先从this里面,也是我们的实例里面去解构出来这两个属性,哎,给到这两个变量,我们先来alert一下,有所name。呃,直接运行啊。好,这时候我们来输入一一啊,这输入二,诶是不是弹出来了,但是你注意啊,它弹的是一个object,它是一个h timer的一个呃元素,你元你看element,哎,这点要大家要注意啊,我们这里是绑给实力的,是这个input的节点,我们现在要拿它的值,你要点value才行。清楚吧,啊,这时候我们再来试一下啊。刷新啊,要有用R,哎,那是不是就拿到了,哎。那再看一下我们的这个例子啊,我们的这个例子呢,它是一句话对不对,好,那这里我们也让他讹了他一句话。
09:03
来,因为是一句话呢,我用这种,我把字符这比较简单啊,嗯,您输入的用户名是do。加上我们的user.value啊,再给个逗号,哎,您输入的密码是。加个冒号吧,这里也给个冒号空格。Password啊。这Y6,哎,这样我们就拿到了是吧,好接着回过头来去刷新一下啊。11122。是不是已经完成了啊,您输入的用户名是密码是好那。呃,看似已经完成了,但是我们点确定的时候,你会发现还是刷新,还是转圈了对吧,还是提交表单了对吧,所以我们现在得想办法不让这个表单提交。清楚了吧,哎,不让这个表单提交,那你如果表单提交了,我们这里获取这个数据还有什么什么意义,我们就是想要在表单提交之前去拿到,诶用户输入的数据,比如说我们做一些验证,哎,你的这个比如手机号合不合格对吧,你输入的邮箱是不是,呃,按照邮箱格式输入的对吧?那有时候我们不想让这个表单进行提交,因为提交的话,大家也看到了,它会有一个刷新的一个动作,是不是这样提验不好啊,有时候我们想使用这个阿贾克斯啊等一些这种无刷新的一些提交。
10:29
哎,所以我们得想办法去阻止这个form表单的提交,那我们怎么来阻止这个form表单的这个提交呢?我们来想一下啊,其实这个form表单它的这个提交啊,就有点类似于什么,有点类似于那个A标签,它能点击对吧,能跳转这些都是什么属于元素的,哎,这个默认动作对不对?所以我们把它的这个默认行为给取消掉,给阻止掉,是不是就可以了?好,那我们来想一想,上节课我们学事件,哎,当我们触发这个事件的回调函数的时候,是不是会给我们传一个啊event事件对象。
11:03
对不对啊,那event事件对象。它有一个什么方法呢?它有一个啊p re为T,哎default,哎,这个方法就可以阻止这个事件,嗯,他的一个默认的一个行为。也就是能阻止哎,我们这个phone表单它的的一个提交事件啊,一个提交的一个行为,我们来看一下啊。找到浏览器刷新一下。一二,哎,这个还是正常的输出,那么接下来我们点确定,看一下这里还会不会刷新,这里还会不会刷新啊。可以看到,哎,是不是完成了啊,这个就是呃,我们的这个是这个方法啊,它可以阻止这个事件的一个默认行为,好呃。那我们好像是不是跑题了,我们要讲的是非数控组件怎么写了这么多,这些东西干啥呢,对不对,那我其实告诉大家啊,其实我们现在已经写完了一个非数控组件。
12:02
清楚了吧,好,那非数控组件总结的话,哎,总结一句话,那什么是非数控组件,就是表单数据,哎由这个盗母节点来处理,哎表单的这些数据呢,我们是现取现用,就是什么时候用到什么来取,你看我们点击提交的时候,是不是才用到这些数据,那当触发这个提交实验,我们是不是才从才从这里面去取这个数据,是不是你看才从这个类似对象上面去获取这个啊盗节点对象,然后再从当节点对象里面获取这个value,是不是现用现取,哎就每次我们点击这个提交才去从那里面去取出去。对吧,哎,所以哎,这就是非受控组件,好,那我们把这个概念往这写一写啊,就是我们自己总结的一个概念,哎,非受控组件啊,就是什么呢?就是我们这个表单的这些数据啊。表单数据。将这个交由。盗墓节点处理。
13:02
哎。表单的数据。现用现取。那现用现取,就是你看我们触发这个事件的时候,也是这时候才用到数据,对吧,这时候才从这里面去取。哎。从啊ref绑定的到我节点中获取表单数据啊,这就是非受控组件。
我来说两句