00:00
好了各位学完pros之后呢,我们学习最后一个属性啊,叫做raps,嗯,在这儿呢,课件里啊,把ris呢和事件处理啊放在一起了,因为他们两个特别适合一起去讲啊,那我们一个一个来先学习raps,来点击一下第三个做这么一个小效果啊,打开界面里呢,有两个输入框,一个左侧的,一个右侧的,左侧的输入框呢,在你输入完内容之后啊,你得点击这个按钮,它才会弹窗显示你所输入的内容,对于右侧的就不同了,你就正常输入,输入完了之后呢,你让这个input框失去焦点,你比如说你在旁边随便点一下失去焦点,那么它也会有一个弹窗的提示,那整体看一下动画的演示啊,输入数据,左侧的点击提示输入有一个提示,哎,那右侧的呢,稍等。正常输入内容。输入完了之后呢,往旁边一点失去焦点,诶也有一个提示,就这么一个简单的小效果,用文字去形容呢,那就在这儿是吧,想看的同学呢,自己可以看一下,好,那回到代码当中来吧,文件夹我创建好了,零八组件实例三大属性3RAS文件创建好了,E ref,固定的结构和引入也都写好了,来第一步是不是创建组件啊,同学呢,已经讲到这个程度了,用类去创建组件,你得行云流水般流畅啊,来写上class,给你的类起个名字啊,也就是组建的名字我就叫做DEMO吧,因为也没有什么名字可起嘛,你可以叫my component,随便来啊,Expense这是必须的,继承谁呢?react.component,对吧,类就定义好了,Render是必须写的吧?啊里边必须得写return吧,由于你是一个多级的结构,是不是最好包一个div呀,走里边都有什么呀,首先有一个input框,哎,为啥飘红了呢。
01:54
哎,标签没有闭合好,再来一个按钮button,点我提示数据,但说的明白一点吧,点我提示左侧的数据,再来一个input框走,标签呢,也得闭合啊,它们里边呢,都有一个place holder,一个提示,对吧?那我们写一下please place holder,那这块叫做点击按钮提示数据,那当然呢,不能写在这儿啊,剪切走放在这儿好哦,那这呢也得加上这个。
02:31
只不过这呢叫做失去焦点提示数据组件定义完了,进行第二步渲染组件到页面,React render,渲染哪个组件呀,DEMO。容器test,右键看效果。
03:01
好,出来了,稍微给大家放大一点啊,他们离得有点近了啊,所以说呢,我这个临时调整调整啊,让他们之间呢有点距离,那我就临时写一下啊同学我用这种形式啊,对吧?啊也是可以的,留一个小空格,我在这暂时先不写样式啊,回头我们会写样式的啊,暂时先不写,这会也得放一个,但是最后这个呢,应该是不用了,好了,回头哎,有点小间距来吧,开始同学左侧呢,是不得诶提示数据,右侧是不是也得提示啊,你觉得着手点在哪呢?先别写右侧,先写左侧对吧?哎,点我提示左侧的数据,那来吧,你的着手点就是给那个按钮加一个点击事间按钮在哪呢?在这来加点击事件,不知道你还记不记得那种写法了,应该写on,然后C是大写的on click是吧,还说老师这还没给我解释呢,对,这还没给你解释呢,React为什么要这么做,原生的uncle click为啥不让你去用,他自己又封装了一套,还得让你把那个C大写,对吗?那这还没说呢,走,那这里边怎么写呀,记得。
04:01
那么所有你自己定义的那些方法,This点,然后得怎么写呢?比如说呃,提示数据,那就是show data对吧,展示数据,那你不能光这么说呀。你敢写this.show date,那就得表示你的实力对象身上得有这个show date呀,哎,那所以说同学,那不就是之前咱们写天气炎不炎热的那个写法吗?Show it得等于是吧,得写赋值语句,得写箭头函数,这样的话this指向它不丢啊。哎,好了,写好注释,这是干嘛的呀?哎,展示左侧输入框的数据,那问题是里边怎么办?先别想里边怎么办,我先colo一个艾符对吧,我看看你所写这个show date到底能不能用啊是吧?来控制台呢,打开稍微放大一点啊走来呃,再往这边来点,点击按钮走艾特福,再点还有再点还有,所以说这个事件呢是可以用的,那来吧,这删掉输出它可不是我们的目的,我们是想拿到这个input框的值,同学,如果按照原声去写,你怎么写呀?
05:08
其实你有很多方式的,你比如说我可以给input加个ID,对吧,比如说叫做INPUT1。哎,输入框一,那你这怎么办?首先是不是得获得这个input框,等于document点儿get element by ID啊,拿谁呢?INPUT1,请问我拿到的是什么?是input框这个节点对吗?I拿到的是input这个真实do。啊,我知道啊,同学你注意现在你写的这些呢,不是真正的HTML标签,是GS叉,但是GS叉标签,但是它早晚要转成HTML标签,变成真实盗放在页面对吗?哎,所以说呢,你这会儿加上ID的话,如果它转成真实盗,ID是不是也在啊,那ID也在的话,document.get element by ID是不是拿到真实到呀,好了,那接下来你要干嘛呀?Alert是不是弹窗啊,弹出谁呀?Input啊,这个节点的什么呢?值那是不是value啊?诶,这都是原生里的东西吗?来,那我们试一下啊,比如说你输入了一个东西叫做艾特硅谷,点击提示走同学能不能提示啊,能说老师呢,这功能就完成了呀,同学,完成了是完成了,但是有点不太合理,首先第一个事儿,你都已经用上react了。
06:26
其实你没有必要这样写。啊,然后再点Y6,没没这个必要啊,为什么呢?因为react里边也给你封装了一个东西,就类似于诶ID这种写法,那不写ID写什么呢?大家注意看,叫ref。说,老师,这不是refs吗?你写错了吧?少写个S吧,不,我没少写,这就写ref,说老师,那refs你别急啊,慢慢来。ref等于INPUT1。哎,那同学你想一下啊,我之前是没有给这个input加任何的react里边相关的属性,我刚才写那ID同学,那可是原生就有,对吗?但现在我写了一个ref。
07:10
好同学。接下来呢,我在这里边啊,什么也不干,我就输出this,你告诉我这个this是谁吧。你应该到了这个程度,应该马上就告诉我老师受date,由于你写了赋值语句加箭头函数的形式,所以说它的this就是DEMO这个组件的实例对象。OK,好,来同学ref,暂且也不写音input的干干净净对吗?好了,保存回到这个里边,点击按钮输出的是谁呀?DEMO组建的实例对象,打开实例对象里的这个你是不是学完了?那这个你是不是学完了呀?同学注意观察,这是不是有一个refs,哎,同学,Props里面是收集的是什么?你还记得吗?Pro里面来回头走一下,如果说你在渲染DEMO的时候,你传了一个A等于一,哎,你写了一个B呢,等于二,它都会给你收集到这个里面去,点击一下走,是不是都在这儿呢?你敢传递标签属性,人家就敢收集成对象给你放在props这个属性里边,哎,那你说它呢?
08:16
来同学,它里边之所以没东西,是因为你没有给任何的标签加上ref属性,如果你加,那你瞧效果吧,来到这儿写啊,Ref等于叫做INPUT1输入框一。好,你回头这个时候我点啊注意看同学走打开,嗨,同学什么呀,里边是不是有了一组key value,我问你key是什么呀?Key是什么呀?你觉不觉得K就是你当时所指定的这个INPUT1,那么问题来了,Value是什么呀?Value就是ref当前所处的这个节点。一定要注意是当前所处的这个节点,那你没看它这里边说了吗?这是input,那为什么叫res呢?那是因为啊,它能收集多组,你比如说同学这个按钮呢,我也想打个标识,其实这个ref呀,同学你就把它理解成打标识,因为我们的课件里也是这么说的,你看组件内的标签可以定义ref来标识自己,就相当于原生里的ID,哎,跟那个简直就是一模一样的,但只不过呢,ID得用document.get element,但是ref不用。
09:31
嗯,来,回到代码当中,同学,这个按钮呢,我也想给它打个标识,Button。啊,或者叫BUTTON100,哎,随便取一个BUTTON100,那这个input框呢,我也想给它取一个值,那你比如说呢,叫做INPUT2,这是一,那这就是二,是不是三个人都被ref所标识了呀,那你回头来看,当你点击按钮的时候,你所输出的组件实例对象的re FS啊这个raft这个属性上你看有几组,KY6有三组。
10:04
这个是INPUT1,代表你第一个输入框,这个八分100代表你那按钮INPUT2的同理代表你第二个输入框。同学觉不觉得其实是这么回事儿,你只要敢在你的结构里边把任何一个标签用ref打标识了,只要你敢写,它都非常非常精准的给你收集到这个属性里边,叫做ras,所以说以后咱可以不用ID了,哎,不用ID了,人家能帮咱们去收集,你只要写就可以,哎,那我目前的目的可不想给这个按钮打标识,对吧?那目前好像也不需要给它打标识,那只需要一个是不是就是左边的那个输入框啊,那我索性就叫它INPUT1了,同学,那你说我怎么拿到这个节点呢?之前你得document.get element by ID是吧?啊,那这回呢,你可以这么写了,This点你刚才看到了res点点谁呢?INPUT1,因为这个名字不是你命的吗?你写好的吗?好了,那这个时候你瞧。
11:04
好的,当我点击的时候怎么样?嗯,这个节点是不是也拿到了,哎说老师我拿到的到底是什么呢?老师我明白了,我是给GS叉标签,也就是虚拟盗墓标签打的标识,所以说我拿到的就是虚拟盗墓不对。不对啊,同学啊,一定注意,你拿的可不是虚拟盗墓,有打开我们开篇的这个PPT。打开同学你看这儿啊,虚拟盗墓,虚拟盗墓这个东西,我们程序员不拿它,你拿它没什么用啊,我就也就是说你写了一个ref啊,往这一打标识,人家帮你收集,同学收集的不是虚拟盗墓,而是该虚拟盗墓转成真实盗墓之后的那个节点,一个真正的节点,OK,真真正正的节点,所以说INPUT1这个人身上它是有很多东西的。
12:00
你比如说在这呢,我给你打一个断点,第八个,诶打个断点啊,这回注意看啊,刷新一下页面走断点是不是卡进来了,往下动一下,你找到这THIS4点ra.input1,你鼠标放在这,诶INPUT1同学放在这,你看这是不真实到没有,哎,这是真实的,你看身上这么多属性呢,OK,好关掉,把这个第八格呢删掉,那所以说同学我想弹出它的Y6值,你都已经知道了,它是真实盗目,那所以说接下来呢,都按照你之前所学的那么写就得了呀,真实盗墓的value值那就是input,那所以说在这呢,我得先拿到这个是吧,Cost结构赋值可以吧,this.rest拿到谁呢?INPUT1,诶,然后提示什么呢?input1.value,哎,那这回你呢,你再看一下右键打开。输入艾特硅谷点击提示是不是可以啊,OK,没问题啊,那这是属于提示左侧的数据,那同学来,你说接下来是不是还得提示第二个输入框里的内容啊,但是我可不是点击谁了,我是失去焦点原声失去焦点怎么写呢?叫做啊乐啊,在react里面呢,按照它那个呃规律是吧,这个B呢,得大写,好,那来到这写,嗯,同学你先写着,我还没给你解释这事呢,为什么它又单独封装了一个on click,为什么把原生所有的on事件人家全都重新封装了一下呢?他有自己的目的在里边啊,才没讲到这儿,On b on BL等于,那这怎么办呀,只要你失去焦点了,我就怎么地呢?还是写呗,反正是你自己指定的一个事件的回调date。
13:44
那这重名了DATA2吧,然那复制,那也就是说在这儿得有一个这个得写赋值语句吧,得写箭头函数吧,嗯,好了,那这会儿写好了一个注释,就是展示不是左侧了,这回是右侧输入框的数据,左改成右,好那你说这里得怎么办呀?诶说老师是啊,这得怎么办呢。
14:09
同学,其实啊,你也可以这样做REF对吧,等于你刚才那叫INPUT1,那你说你这是不是就可以叫做INPUT2啊可以吧,INPUT2,那你这当然就是复制来到这这改成二,这改成二,保存好了,回头刷新一下啊看效果,呃,输入一个1234往旁边点失去焦点一二三点走是不是有提示,好,那同学你就完成了ref的一个基本使用,而且你注意啊,同学你写在标签里的是ref。然后呢,再组建实力自身上那个属性不叫RA,叫ris。哎,所以说这块啊,你要知道你写在标签里的是rap,人家收集出来之后形成的那个属性叫做ris,那这儿呢,我得重新改个名,同学你发现呀,就刚才我写这两个rap,它都是什么类型的呢。
15:09
你仔细看是不是都带着双引号啊,那所以说刚才我写的这两个rap呢,都是字符串形式的rap,那所以说给这改个名字,右键重命名,叫做字符串形式的rap,诶rap那这块呢,也得改一下啊,名字呢给它复制过来放在。这有一个title,哎,放在这儿好说,老师,那就只有这一种写法吗?其实不是的,同学啊,它还有两种写法,你看课件上啊,除了有字符串形式的,还有回调形式的,还有create ref形式的啊,咱慢慢来,先把这个给它搞明白,也是最简单的一个,那这一小节我们停一下。
我来说两句