00:00
Ref之后,诶,我们来看一下事件处理,诶事件处理呢,总共就这些内容,我们依次来看一下,首先我已经把代码准备好了啊,哎,是一个复用的,我们上一节课的那个例子,我们把那个注释稍微简写一下啊,这个是准备一个ref容器来,接下来我把这个编号改一改,上节课写错了啊。这应该是零五。好。在这里面来写我们的例子啊,那我们把这个内容复制过来,以此来看一下啊。放到这里啊。哎,这个给个编号一。二。我们依次来看一下啊,首先我们也写过很多这个react中的事件,对吧?这么些例子有的都用到了事件,那react事件呢,是通过on,哎,加这个,注意这个字母大写哎,这种的属性指定事件的处列函数,哎,注意大小写哎,我们原生的是使用,比如说是on小写click click对不对?然后在react中on后面的这些事件同样用大写。
01:16
知道吧,啊,那。为什么react中它要用这种大写的方式呢?不直接用这种小写的方式呢?哎,注意一下啊,这是我们第一个特性,就是说react它使用的是自定义的一个事件,哎,它自己合成型事件,而不是使用的原生的DOM的事件,那它为什么不直接使用原生的,而要使用自己去定义呢?哎,其实它自己定义的话,也是在这个原生的事件的基础上进行了一系列的封装,那他为什么要这么做呢?哎,就是为了更好的兼容性啊,为了更好的兼容性,诶,它要兼容各个,呃,这个设备啊都能用,因为原生的事件的话,它会有一些这个局限性啊,这是第一点,第2.react中的事件是通过事件委托的方式处理的,也就是说我们定义在这个react中上这些元素上的这些事件啊,并不是直接定义在这些元素的本身,而是它会委派给最外层的这个盗墓元素。
02:13
哎,委托给这个组件的最外层这个元素去处理,那为什么这么做呢?我们来回想一下,在以前我们写原生的这个h time面的时候,哎,有这么一个例子,我们一个u Li,哎,里面有Li对吧?好,现在我们这些一个导航,我们要给这个Li,这个导航一些点击事件对吧?那我们如果直接给这个Li的话,要每个都去加上这个点件是比较麻烦,诶我们一般怎么做是直接给这个啊,这个ul去加上这个事件啊,那么当我们去触发这个U时候,因为存在这个事件冒泡,哎,所以也能触发对应的这个。啊,点击事件对吧,就是因为这个事件冒泡,所以我们可以把事件委派给最外层的一个元素,好,这也是react他事件的第二个一个特点,是通过事件委托的方式,委托给最外层的元素去处理的,那么这么做的目的是什么呢?是哎,为了更高效。
03:12
好,那接下来我们再来看react事件的这个第二个一个特性就是我们可以通过event target得到这个发生事件的DOM元素对象,对吧?这个在我们之前学原生GS的时候,也可以通过这个event对象去拿到,就是触发事件的这个事件源,哎,我们在原生验室里面一般是习惯说事件源是这样的啊,啊,那在react中也是一样啊,我们可以通过这个event target,哎,得到这个发生事件的一个盗募对象。那我拿到它有什么用啊?来,我们来想一想,哎,如果刚好触发这个事件的这个元素,刚好是我们要获取的这个。竖框,那我们是不是可以直接通过这个对象拿到这个值,哎,比如我们的第二个这个对吧,失去焦点。获取这个里面的输入的值,是不是就可以直接拿到这个事件的对象去获取到倒元素值对吧?好啊,大家可能有疑问,哎,我直接通过这个ref也可以拿到值,我为什么还要去用这个事件对象去拿呢?
04:12
来我们来看一看这个ref的这个官方的这个文档,它怎么说好在这里,哎,之前我们看的时候把这给略过了是吧,现在我们来看一下物过动使用ref对吧?诶官方不推荐我们去过度的去使用ref。那怎么回事呢?啊,所以说。哎,当我们能避免去使用ref的时候,我们就不去使用,好当我们实在避免不了的时候,我们再去使用,那什么情况下我们可以避免呢?就比如这个,诶,我们这个发生事件的事件对象刚好就是我们要取值的这个元素,对吧?那这个时候我们只要通过触发事件的这个事件对象是不是就可以拿到它的这个值呢?好。来,我们来试一下啊,那。嗯,这里ref我就不需要了,对吧?啊,然后接着,哎,这个我就不能去从ref这里面去获取值了啊,那我把这个都先删掉啊好,我们知道当我们触发这个事件的时候。
05:14
会得到一个事件对象event,那这个事件对象是在哪呢?诶,它会自动帮我们传到这个回调函数里面,清楚吧,来,你看我们是把这个回调函数给到了这个失序交点的这个事件,对吧?好,那么它就会把这个事件对象是给到我们的这个回调函数,所以我们可以用一个参数来接收这个事件对象。好,那我们来打印一下这个实验对象,看一下啊,来右键在浏览器中运行。打开lo啊。我们把它调到这边。现在我输入数据失去焦点,好,因为是alert,它所以直接是把这个数据的类型给弹出来了,那我们换成cons。现在再来看。
06:02
刷新一下。是不是输出了一个对象,哎,这个就是我们刚才在这里打印的这个事件对象,哎,我们可以看一下这个事件对象上它有一个target属性,那target属性呢,就表示触发这个事件的,呃,事件源,也就是说触发这个事件的盗墓对象,那我们来打印一下这个target,来看一下是不是啊。来刷新。111是不是得到这个input了?哎,就是我们这个失去这个焦点的时候触发的这个事件的这个盗墓对象啊,那我们既然能拿到这个input的对象,我们是不是就可以点value去拿到我们这里输入这个值,诶,当时体焦点的时候触发这个回调函数,它给我们传了一个啊event这个时间对象,我们通过这个时件对象的target属性就可以得到触发事件的DOM对象,哎,通过DOM对象的这个value就可以拿到它这值来看下效果。111,诶是不是有了,好,那这样我们是不是就可以不用去使用这个ref,也一样能拿到这个输入行的这个值,对了吧,好,这个就是我们在可以避免去使用这个ref的时候,就尽量的去避免使用RF,那像这种,呃,它呢,你这里是input的,我们要拿这个input的值,对吧?但是我们的事件是给到了谁身上,给到了这个button身上,所以如果你这里你去拿的话,哎,这里应该拿的是这个button的这个呃到对象而不是input,所以这里你就不好获取值了,哎,这里我们可以使用这个iff,不行,我们来看一下啊,我们来改一下第一个。
07:29
啊,第一个我们点击这个button按钮,是触发的这个安可事件,然后是执行的这个回调函数,对吧,我们在这里去打印一下event.target啊,Event点。Target。Log啊,来看一下。刷新。好,要要要。弹出了幺幺对吧,那这里我们输出的是不是这个八层的这个对象对不对,好,所以这个是触发事件的事件,这个盗墓对象啊。
08:02
啊,刚才111是还是我们从这个if里面去获取的啊。等接下来我们讲了这个数控组件的时候,即使是这种形式也是可以省略掉ref的,哎,这个我们到后面就去讲一下。好,这个就是关于事件啊,有这么几点啊,一个是一定要注意这个大小写,在这个RA中,我们的事件属性一定要是on,然后加这个,诶大写的这个事件的这个字母的这个开头,好,再来之后就是要注意啊,我们的这个它使用的是自己自定义的一个合成的一个事件,而不是原生的这个端事件啊,是为了更好的一个兼容性,还有就是react中事件是通过事件委托的方式处理的是。把事件委托给了最外层的这个元素。啊,这样是为了更加的高效啊,还有就是在这个事件里面,它接收的是这个回调函数,我们这个回调函数呢,是可以接收到这个事件的一个对象,对吧?那在这个事件的对象里面,我们可以获取到这个事件相关的一些信息,哎,比如说触发这个事件的事件源。
09:04
也就是触发事件的道M元素对象,哎,通过这个道M元素对象,我们就可以去获取它的,哎,DOM相关的一些呃属性。
我来说两句