00:00
在学完啊组件的核心属性prop之后,我们接下来接着看组件的,哎,另一个核心属性。我们通过这样一个例子来给大家讲解这个for,诶,就是这么一个例子,当我在左侧的输入框里面输入内容的时候,我点击这个按钮,弹出来左侧输入框的内容,哎,当我在右侧输入框输入内容的时候。当我失去焦点,哎,它显示右侧输入框的一个内容,好,接下来我们开始编码。哎,这里我已经复制了一个。文件啊。引入了一些需要引入的库,那这里第一步首先还是创建组件。创建一个,哎,你创建一个DEMO组件,一定要继承啊,React的comp。啊。有一个render方法。
01:02
瑞腾啊。这里面写我们的代码,看一下我们的结构。一个输入框、一个按钮和一个输入框。Input。哎,文本类型,然后我们最外层要有一个节点是吧,因为我们现在是有多个,哎,多个元素,那我们给它包裹一层div来input。Holder啊,这里要有一个结束。我来看看啊。把这个删了。点击按钮显示数据。留点间距,我们用这样简单一点的去写啊,留点间距,接着是一个按钮。点击。
02:00
显示左侧。数据。来再给他留点间距啊,最后还是一个输入框,哎哟,这种单标签啊,我们一定也得闭合才行,失去焦点。显示数据好。第二步啊,把我们的组件给挂载到我们的这个容器上面。哎,渲染组件到页面。React,到点render。DEMO组长。把它挂载到test这个容器上面。我们来运行一下啊,看下效果。啊,效果是有的啊,只不过现在没有加这个。
03:01
这个这个效果来,我们的这个想要的效果是什么?我们输入这个内容之后,点击这个按钮,显示这个里面的内容,对吧?那我们需要给这个按钮绑定一个点击事件对吧?然后点击这个按钮呢,获取这个输入框的一个内容,想一想我们之前用原生GS怎么写的。我们原生GS啊。我们先一步一步来,我们先把这个事件给绑上,在RA中绑定事件,哎,我们使用这个啊,On click啊,这个要大写,它和原生的不一样啊,这个我们到后面学时间的时候会另外再细说,那这里面执行一个函数啊,修对称,那我们现在没有这个函数,我们在这里来创建这个函数啊,修date一定要用赋值语句加箭头函数,哎,这样可以解决this指向的一个问题。先写上一句话,看我们的按钮,哎,就是我们这个事件能不能正常的执行完了啊,点击按钮了。
04:04
刷新一下来,我们来点一下,好,我们的事件正常了,那接下来我们来想一下,我们在写原生GS的时候,我们怎么去获取它的这个输入的一个数据,是不是给他一个ID,哎,比如给他ID input,那在这个里面。Let input是不是可以通过document的get eleven BYD,我获取到这个节点,哎,获取这个input节点之后啊,我这里获取的是HL的这个do的一个节点,我要想要拿到它的这个值。是不是得用它的这个啊,Y6属性对不对,来接下来我们看看这是我们原生GS啊。刷新啊,输入一,诶是不是获取到这个左边书的内容了,好。哎,这是我们原生GS,但是。大家不感觉这么写非常的怪异吗?啊,我们既然都用react了,还为什么要用这些原生的简去写呢?那我们用react的意义何在呢?
05:05
是不是啊,所以说那这样行是行,但是肯定不是符合的规范的,那react我们来怎么写呢?我们先把这些代码都删掉啊,在这里面去输出一下这个this,这个this呢,哎,因为我们用了赋值语句加签的函数,所以这个this它可以去指向这个DEMO组件的这个实例,好,我们来看一下。打开。刷新一下啊。哎,点击哎,因为我们是放到了点击事件那个事件的函数里面,回调函数里面,所以这里我们点击一下,哎,输出DEMO这个实例,我们来看一下这个DEMO组件的一个实例啊,Purpose我们学过了,对吧,然后这个C我们也学过了,是不是接下来还有一个什么呢?还有一个这个大家看到了吗?它是做什么用的呢?它就是我们这课要学的,哎。好,那我们来看看怎么用,它现在是空,也就是说没有数据,那我们看看怎么把数据给它放到这里面,哎接着想一下刚才我们的问题,哎,我们想要去,呃,点击这个按钮获取到这个数据,我们通原生的GS是通过这个ID来获取,对吧?但是我们这里用react,我们就不用原生的去写,那react里面可以写什么呢?可以写这个啊if,诶,它有点类似于这个原生的这个ID啊,它可以去标识这个节点的这个本身。
06:23
清楚了吧,好,当我们把这个input给上一个属性之后,这时候我们再来去输出这个this,我们来看一下。来刷新。点击啊。诶,大家可以看到这个啊,Reference这里面多了一个内容是input指向input,对不对,好,这两个名字一样啊,如果不好区分,我们来改一个啊,把这个input改成一,这时候我们来再来看一下。点击啊。可以看到,哎是不是INPUT1,哎input那这是什么呢?啊,这个就是我们给这个input加了一个refer之后,哎会帮我们把所有这个元素加了,他帮我们去收集到。
07:08
这个组件实力的这个force这个属性里面,哎,如果有多个,它就会收集多个,那它这个键值分别是什么呢?键,哎这个K肯定是我们这里定义的这个名字,对吧?大家看到了好,那它的这个value是什么呢?它这个value,哎就是这个input,它就是HTL。哎,它的这个节点啊,就是道母节点,哎和什么一样呢?和我们之前用ID,哎,我给大家打印一下啊。Log。Document get element ID,我们现在没有ID了是吧?哎,我们这里给一个ID。银铺的啊,还来获取一下这个银铺的。刷新一下啊。这是我们用原生GS去获取的这个do的一个节点,对吧?好,那其实react呢。
08:01
当我们给这个标签加上了ER属性之后,哎,他帮我们收集到了组件实例的这个。看一下啊,这个属性里面啊。K就是我们自己定义的这个名字。啊,Y6呢,就是。我们的这个哎,Input节点你看我往上放一下,它还能给我显示到这里是不是,哎,那这样的话,我们是不是就可以通过这个呃,Refer直接去拿到这个输入的这个内容了,对不对?来大家看一下,你看refers它是不是这个对象实例上的一个属性对不对?而我们的这个this是不是对象实例,那我直接通过这个实例拿他这个refers是不是可以啊,大家有点要注意啊,我们给标签属性呢,加的是,但是我们这里,哎组件实际上这个refers,哎,这也很好理解,你给一个标签你去加refer,那肯定单个的嘛,对吧,那它这个实际上的refer,它要收集很多这个标签的这个refer,所以它是个复数形式嘛,所以refer啊,这个不要搞混了啊好。
09:01
那里面的谁是不是我们自己定义的这个名字来。刷新啊,我们来点击,诶,是不是和我们之前通过ID获取的那个,呃,引input的是一样的,哎,它就是原生的这个盗墓的一个节点,哎,注意它是真实的节点,不是虚拟的盗墓,清楚了吧。啊,虽然哎,我们标记这个if,我们是写在这个虚拟道上面,但是它最终给我们转化出来的这个实例,是经过它先转成虚拟道墓之后,最后转为真实的盗墓,我们这里拿的是这个真实的盗墓节点。清楚了吧,哎,我们写的就是很少去直接操作这个虚拟盗目的啊。哎,我们在拿到了它之后,它的这个Y6,哎,是不是就是我们左侧输入框的一个值来试一下啊。哎,一是不是输出了1CONTROLRLO了,对吧,我们用A了嘛,好。那接下来把这个代码啊优化一下啊。
10:00
我铺的一啊,等于。诶,从我们使用这个结构吧。This,第2FOR啊,从这里面结构,那按照我们的例子来写,这应该是一个alert是吧?Alert input1 input1呢是原生的,呃,道母节点,那它的这个Y6属性就可以拿到我们输入框的这个值对不对?看一下啊。上心二二是不是拿到一个值了好。哎,接下来我们把这个注释写一写啊。左侧。显示。左侧输入框的数据啊,来这个我们写完了之后啊,那我们接着去写第二个,第二个呢,是失去焦点显示数据对不对,那首先我们来给它一个失去焦点的一个事件。哎,在这个rest里面,我们事件呀,都是,哎改成了这个on加这个这个字母大写啊,呃,原生的呢,它是都是小写,哎因为rest呢,它做了一层处理,这个关于事件的这个处理呢,我们到后面再说,哎,这里我们知道我们要给他一个失去焦点的一个事件就是啊。
11:14
这个对不对,好,那他也应该指向一个函数。修对二吧,我们来复制一个这个把它改成二。然后这个是右侧。那这个是二。二诶,这时候我是不是要再给他一个refer,让它的值是这个INPUT2。对吧,这样呢,就可以给我们数据到这个隐二,我们去输出它的这个值,当失去焦点的时候就会触发,哎,这个。回答函数。来刷新一下。一是焦点是不是出发了,哎?那这个例子我们就写完了,这个例子写完之后呢,我想大家对这个啊refer也有了一定的了解,哎有点需要大家注意啊,我们在给标签属性,哎,设置的时候呢,是这个我们取的时候呢,是refers啊才是这个组件实例上面的这个属性。
12:13
这个不要搞混了啊,再有就是啊,我们可以去设置多个的这个referd,就是说多个标签,哎,我们可以给每一个标签都去设置这个,哎,Refer,好,那么我们来看一个东西啊,我们这里来写的这些都是什么,都是字符串是不是,你看我们这里定义的这两个份都是字符串对不对?哎,所以我们这个是又被称为什么是字符串形式的,哎,Refer,我们把这个标题改一改,字符串形式的。来把这个也改了啊。那既然说到这个字符串形式的reform,那肯定还有其他形式的,对不对,诶还有两个形式啊,一个是啊回调形式的,一个是CRA reform,这个我们在接下来的小卷里面去讲。
我来说两句