00:00
好了,各位学完ref之后呢,我们去说说react中的事件处理,其实很简单啊,就这么几句话,我们慢慢来回到代码当中,文件夹零九,React中的事件处理以及这个文件呢,我都已经建立好了,固定的结构呢也写好了,我还想用之前的那个案例,省着我再敲了,那我把它拿过来,这个里边的最后一个,把所有的这些案例的内容全都带过来,关掉,折叠,打开来到这个里边粘贴,我精简一下啊,我把这个复杂的注释呢,写的再简单一点,就叫做创建ref容器,这个容器是不是专人专用的,我怎么从容器里边取出东西,大家现在应该已经都会了啊,敲几个回车,让代码清晰一点,走,捋顺一下这个案例啊,我先把目录关起来,创建ref容器,Short data是提示左侧的数据的short data2是提示右侧输入框数据的左侧输。
01:00
框在此你写了一个ref容器,点击按钮呢,再提示左侧的数据,右侧的很简单,直接失去焦点呢就可以提示,那接下来呢,我们这么做,回到课件当中,把它总结的这几句话呢,我们直接给它粘过来,回到代码当中,我放在这儿啊,粘过来格式呢和缩进我调一下。这呢改一下一点,这呢也改一下二点,走走缩进的再调一下,好我们呢就读读这句话啊,首先看第一句通过on什么什么属性指定事件处理函数,注意大小写。原生的on click是不是这么写的呀?那么react中on后边那个单词的首字母是不是大写的?哎,大写的click为什么要这样做呢?那是因为啊,同学,所有原声里的on什么什么事件react呢,都重新封装了一遍,读a react中使用的是自定义事件,也叫做合成事件,它并没有直接用原生的那个盗墓事件。
02:15
同学,指定原生的点击事件是不是得用小写的click,而react里边呢,用了一个大写的click,他把原声里边那些都重新写了一套,那为什么他要这样做呀?很简单,同学在这儿呢,我给你来一个说明,为了更好的兼容性,同学你想啊,React能做那种无聊的事儿吗?原生的uncle click挺好的哈,React来了一个二次封装,他写了一个大写的click,然后呢,里边用的还是这个小写的click click,那他不白玩了一圈嘛,所以说呢,人家里边呢用的是一个自定义事件,为什么他要封装这个呢?里边它考虑了很多兼容性的问题,哎,所以说呢,React用合成事件是因为一个更好的兼容性啊。那再读第二句,React中的事件是通过什么方式呢?读事件委托的方式处理的,也就是说所有你写的on什么什么事件。
03:16
其实他都委托给了最外侧的元素,你看你的结构啊,同学,你比如说你给家的昂click,你给input家的昂布勒,其实react在工作的时候,把这些事件呢,都加给了最外侧的div,加在了他的身上,那为什么要这样做呢?同学还记得吗?事件委托的原理是什么呀?是不是事件冒泡啊?同学回想在最初期的时候,你写功能的时候,你肯定写出过这种代码,U Li里边呢,是一个一个的Li,咱就假设这Li呢是一个一个的导航项,点击不同的导航项能看到不同的东西,我问大家,你是不是得给Li一个一个的去加click事件呀,那你真这么做吗?不是,我们当然是不给Li加click事件,给它最外侧这个ul,哎,加事件,那纵使你点的是每一个L冒泡的话,也能冒泡到这个ul身上,对吗?那为什么这么做呀?哎,因为它高效,所以说在这呢,给大家写一下啊,为什么要使用事件委托呀?嗯,为的是啊,为了高效。哎,所以说这就是react的设计。而我们再读第二句,你可以通过event.target得到发生事件的盗墓元素对象同学原生里面。
04:35
我是不是也可以这么做呀,Even点他给他,咱不是说那是发生事件的事件源对吗?说老师那用它干嘛呀,我不知道,他对我也没啥影响啊同学还记不记得了,我们在学习ref的时候,学习这个人的时候,官网里面可说了一句话,我们回到官网啊去看一眼,他说了这么一句话叫做请勿过度的使用ref。
05:00
什么叫做过度使用啊?就你动不动就写个ref,动不动就写个ref,你注意啊,我可没说你写哪一种re,你写哪一种无所谓,React的意思是你别动不动就写个ref,你比如说在这儿,哎呀,写个ref,你在这儿呢又写个ref,有些时候那ref是可以省略的,你不一定非得要写出ref,说老师,那就咱们这个案例好像不写ref,它实现不了啊。不是的,同学,就第二个输入框来说,我不写ref一样能实现功能,说老师那怎么写呢?瞧着啊同学,第二个输入框什么时候提示啊,失去焦点啊,对,那谁失去焦点提示啊输入框啊,啊,那失去焦点之后提示的是谁的数据啊。还是他的呀,那你觉不觉得同学发生事件的盗墓元素和你要操作的盗墓元素是一个?
06:00
Input发生勒,提示的是input的数据,那这个时候啊,Ref你就可以省略说老师就不写对。老师,那不写,我失去焦点的时候,它得掉show data2那来到这儿,哎哟,老师,那我看你怎么做,你不打标识,我看你怎么能拿到这个input呢,完全可以。因为啊,同学是这么回事,你给他指定了一个show date2作为失去焦点的回调。等你失去焦点的时候,React确实会帮你调这个date,二调的同时啊,其实它把一个东西呢,给你传进去了,就是event,哎,发生事件的事件员,或者说呢,应该叫做事件对象,如果你真正拿到事件员,我问你是不是得这么拿event.target点这是谁呀?发生事件的事件源就是这个input框,你不要取它的value值吗?那就点value。好了,我们去看看效果啊,走。
07:02
控制台呢,打开输入一个456,失去焦点走能不能出结果呀,能,所以说同学记住吧,以后怎么办,不要过度的使用ref,有些时候ref是可以避免的啊,那我们回到代码当中,什么时候可以避免呢?什么时候可以避免发生事件的元素正好是你要操作的那个元素,你就可以省略这个ref对吗?那你看我整个页面中是不是就写了一个ref呢?说老师那这个能不能省略呢?那么目前以咱们的知识量,你省略不了。同学,你给谁加的可事件按钮,但是你却要拿到谁的数据啊,第一个input那做不到呀,说老师那我就比如说在这我就写个event,它不也得有吗?老师,那我输出这个conslo啊,这event点他给他,那是不是我也能拿到这个Y流值啊同学,你这个event他给他指的是这个按钮哦,指的是这个button,而并不是说这个input,那这按钮按钮绑定的click事件,那这个事件的回调里边even点他给的肯定是发生事件的事件源,那肯定是button嘛,因为你给button绑定的事件嘛,人家根本找不到这个input对不?哎,但是在接下来呢,一会我去讲这个受控组件的时候,你发现啊,即便是这种形式也可以省略ref啊,那我们回头再说啊,那在这儿呢,我们补一句啊,叫做不要过度使用ref,不要过度的使用ref好。
08:35
那这一小节呢,我们停一下。
我来说两句