13_尚硅谷_组件_收集表单数据.avi原创

二。下面我们来看下一个。下一个说的是我们在组件里面如何来收集表单数据，大家知道我们再去做东西，做表单不很正常的嘛，对吧？啊，比如登录表单了，注册表的呢，写在我们的组件里面，我们来转呢，收集数据了。哎，这里面就有一个。我有个用户名，有一个密码，就是我点击登录会弹出来我们当前输入用户密码，但是呢，我的表单没有提交，这里要注意。啊，怎么样去实现，我点击登录，最后不提交表单。啊，这个也是要做一番处理才行。功能都非常简单，这就是一个组件啊。行，那我们不管怎么着，先把。先写到不能写为止。来。我们就一个组件啊，那还是先定义组件内再去渲染组件标签呗，啊不变啊class。

的名字。啊叫叫什么叫looking吧，登录表单。啊，继承react.component固定来一个什么render，诶来一个大括号，来一个来一个小括号，里面准备写标写是吧？啊OK，好，最终你们写不写，我最终把那个第二步先做了。A react do logging。接着did。嗯。好，我们来把那个表单给他写一写，其实非常简单，就是来个form呗。

那个form里面是应该是两个input啊，一个一个登录按钮，Button是吧，嗯来嗯，用户名给的是input。嗯，结束是吧，应该有一个type吧，嗯，没问题是吧，好，下面。嗯，复制一个这个是密码，密码呢最好是pass沃是吧？啊pass好还应该有一个什么button。Button啊，这个不用我用那个啊，Input用这个，呃，Input some。一般这个会比较好一些。这个应该来个value是吧，等于。啊，登录。

好，那也就是说我们的这个静态组件呢，已经完成了，我们先来看一下这个静态组件的效果。可以吧，啊可以啊，当然如果选空格，空下格是不是也可以啊，啊这都没关系，好现在我们是希望什么呢？比如说我输入啊用户名是ABC，密码呢是二三，接着我点击登录。其实现在那个表单都提交了。啊，一般表单呢，会有一个会有一个action，这个能懂吗？啊，Action就指定我的目标对吧，就说写个斜杠test啊，那你想想看，我们现在啊，大家回过头回过头看一下。把这些先都去掉啊，这是插件搞的鬼。啊OK，我随便输一个啊123走你。你看提交哪去了，也就说表单已经提交了，我不希望表单自动提交，能不能好。

来下面呢，我们就要去做我们想做的事情啊，我们说我们要最终要实现点击登登录的时候啊，我要去能够提示当前输入的值。我说过这个交互先做什么绑定事件对吧，那绑定事件呢，放表单的啊，有两种方法，一种呢，是给这个它添加点击的监听。一种是给form表单添加一个监听，叫on。Submit。能懂吧，就当提交的时候，这个点击提交的时候，它就会调用啊，给他一个什么回调函数吧。写什么this点时写一个hand的上是吧？可以吧，可以，那我们就是上面的写法就是很固定的，说实话非常非常固定啊，先来一个这个对吧，接着。

啊，看的啊，虽然说这个写项比较烦啊，但还必须得写。不知道。啊，OK，下面需要绑定是吧，把这个复制一下this，点它this，点它点find this套路啊。好，在这个里面啊，在这个里面我们要相当于做两件事情，第一件事情需要把这两个输入框的数据读出来，是不是还有一件事情是不让表单提交。我们先做容易的，不让表单提交，这个该怎么做大家知道吗？也就是说表单提交是不是我点击这个按钮的一个默认行为啊啊哎，对，阻止默认行为。啊，这个有一个方法叫。有没有？

这个应该知道啊，叫阻止啊，事件的默认阻止事件的什么默认行为，它的默认行为不就提交吗？能懂吧，啊相当于就是提交看行不行啊，因为这个简单，所以我们先做。刷一下啊，随便写点懂了吗？没有，没有动的原因其实非常简单，就是因为我有这句话吧。能懂吧，好，前面我们来做我们想做的事情。那前面呢，我们想去读这几个的值，这个咋算。F是我们首先就能想到的啊，来我们把这个用户名其实有两种办法，我们先来做if这种办法，Iff是我们前面学过的，Iff等于不等于一个怎不算。等于个它吧，就是写一个什么input箭头Z时间，哎，我这就不写input，因为这里面有两个input，所以最好写一个啊啊name input不也行吗？对吧，等于什么input，哎，这个名字永远写input都行，这没关系，这是个行参。

相互之间不冲突对不对啊，也在下面一起input的，有关系吗？没有，因为这是行参呢。但这个名字你你也叫input，下面也叫input。那不就冲突了吗？能不懂好，有了它以后，后面我想取到这一个value是不是很简单呢？啊OK，看取一下我们这边想得到，我想去得到name呗，是吧，怎么的，This name input点。没问题吧，啊，OK，来，我们先alert一下这个name，看行不行啊，一个一个来啊，不着急。啊，AA找你。

可以是吧，那按这样的话，下一个是不是类似的话很容易啊，好，我们换一种思路啊，换一种思路啊。是这样一种思路啊，它呢，我先写出来啊，这样。我们这里面除了绑定事件还能做什么？在构造器器里面。是不是初始化状态，初始化状态看着啊，是这么写的，this.state等于它那呢，我这样。我在这里面呢，存一个状态叫PWD，一看就是存那个啊密码的是吧，来看着我。我在这里面弄一个value，你说value取什么去。取什么？This，是的，是state的WD嘛。懂吧，啊OK，但是我就这么做一下，你觉得。

有什么问题了，看看啊，看一下挺有意思的一个事情，看啊。我说不进去了。我想往里面输东西，输进去，知道为什么吗？因为你想想看啊，你现在的value总是等于倍点PW，你怎么能输进去呢？其实是你输进去以后，它又回到以前的状态了。因为你这个没变嘛，那也就是说你在输了以后，你要立马的把那个你输入数据给它设置到什么PWD里面去。能懂吗？啊这个地方啊，当我输入的过程中，大家知道会触发一个事件。Unchang。这一个安嵌体啊，我跟大家说一下，在原生断的安嵌体什么出发，原生断纹的安嵌体，输入框的安嵌体是在失去焦点的时候出发。这个能不能懂啊，大家可以测试一下就能知道啊，原生段里面的on change，它就是input on前不是select，不是select啊，Select不也有安全机吗？对吧，Select也是有安全的。

啊的标签能懂吗？啊，Input on change，它原生的是在失去焦点的时候触发，而我现在是希望什么呢？大家想想看，我应该是输入一个A，假设我输入一个A，而这A是不是立马要保存到我的state里面去，那得事先处理啊。呃，这个时候啊，React它改变了原生的，我们说过啊，React它用的是原生的作文吗？事件不是，它是自定义的。他的这个安全井非常好。你一输它就掉。啊，你一输入改变，它就会调用，而不是实际焦点啊，这个比较特别，那我就利用它的这个特点看到我。

啊，看着我啊，我这个地方来写一个this.hand。陷阱。那我要干嘛去？是不是又要定一个方法，定一个方法定义一下，也写个疑问答案，等会要用，嗯。还要做什么事，先把这个，先把这个事搞了再说，不管他用不用，This先搞好对吧，搞好肯定没问题啊好，下面我在这里面干嘛呢，大家看看。我是不是要读出来当前输入框的值啊，OK，读取输入快啊，输入的值干嘛？下一步是不是更新状态，更新谁的状态，PWD的状态是不是这意思好搞啊，来，现在去读一下PWD等于。

This，不用不用啊，不用this even点他就行，因为就是当前这个input。这个比较方便一些，能懂吧，点什么value。啊，有人说老师什么时候even的什么样的意思，你这个事件，你这个被操作的东西和事件发生的是同一个元素，当前元素，你操作当前元素，那当然用even比较方便。能不能懂？好，下面更新状态，This，时间，Set state set state。打个是什么P2D。啊，这个取名非常关键啊，我至少现在能取，是因为我这个名字刚好。跟这个名字是一致的。能不能看到好，那也就是说来看看，我们先来看一下效果，看行不行啊。你来看我现在能不能输进去各位诶看一下工具。

我们不有工具的吗？我看我说了什么啊。说什么SSS？那你就说我们最后想去读name和password，就是来看呢，准备提交的。啊。用户名，喂，好这个时候啊，我要用一下啊模板字符串。为什么？大不是大括号多了福。接着是什么name啊，密码为。多了福大卦好，这个时候我是不是要取出我的password pwd？我不用去那个这个洞里面去了吧。

因为我当前是不是就存在这个状态里面了，怎么做。哎，来，我们把那个把那个帕的也给大家求一下，这么写是吧PW。等于。This state。可以吧，可以传什么PWD。有人可能就说，老师，你怎么这个是一会用大括号，一会又不用呢，你这咋不用呢。对不对。这能用，现在我能用大瓜吗？能不能？不，我用大括号这样搞的。可以啊。不行，你要用的话，你得把这个value给它删掉，你这就写value，明显这个名字不太好嘛。能吧，名字好的时候我才这么用，名字不好的时候，我得指定一个好的名字啊。

看到吧，就什么时候用什么时候不用，也是一个选择的问题啊。可以了吧，来我们来看一下，看看我们当前这个是不是可以了。来输入硅谷啊，输入123。啊，手六走你。可以可以。好，那也就是说我们现在要想收集表单数据，是不是两种方式？能不懂两种方式，好，其实有两个概念啊，没跟大家说，其实我们已经用了。包含表单的组件呢，分为两类，一类呢叫受控组件，一类叫非受控组件。什么叫受控组件呢？这个主要是交流的时候你要懂啊，别人跟你说其实很简单，一个事情就是一个道理，其实本身并不难，那如果你不懂。这个东西就很难。

啊，这个这个道理应该是知道的啊，受什么叫受控组件是表单项的输入数据能自动的收集成状态。我们当前的这一个是不是有一部分是这个密码是受控组件吧，嗯。是不是它能自动收集到我们的state里面去？但你得做些事情，你不做事情他也收集不了。这叫受控组件，那什么叫非受控组件呢？也就是说需要时啊，才手动的去读取表单输入框的数据，你看我的这个用户名就是这么做的。我在输，我在需要的时候，我是不是点我是。那么呢，我相当于我手动的去输入框里面去读这个数据，呃，如果它是个受控的，那我是不是直接读状态就可以。而且它自动会去收集。我在改的过程中，它是不是就收集好了。

看到了吧。嗯，他就他是不是在收集吗。啊，那也就是说我们当前这个组件啊，既是受控组件也是什么呢？啊，非受控组件就相当于我两种用法都跟大家用了用。也就是说什么这个没有绝对的说一定要用哪个，我倒更喜欢用那个，第一个就是非受控组件的写法比较简单一点。能懂吧，因为你这个受控组件是不是还要定义状态吧。听懂吧，啊，静行状态接着再去，是不是肯定要加安嵌体事件监听必然要加，你不加的话，他根本就输不进去。啊，说白了就是第二种，这种写法更加什么麻烦一点。但是你得知道，得会用。最终啊，你选择用哪一种那都没关系，其实两种都能实现我想要的效果。啊，还有一个事情就是这个如何阻止世界的末日行为，其实以前的跟以前的语法是什么一样的。

嗯。行，那整个就完了，大家的目标啊，其实非常简单，就是根据这一个需求的这个动画，这个效果动画，最终把这个效果给它写出来就OK了，因为我们这里面每一个测试呢，基本上都是一个要做一个小的效果啊。行。