00:00
接下来继续完成我们的案例,哎,我们需要一个点击事件才能实现,哎,我们点一下去改变一下它的状态,哎,切换一下这个炎热和凉爽,好,在说这个relax中,哎,它的这个事件绑定之前,我们先来复习一下原生GS我们是如何绑定事件的啊,在这里我们新建一个。嗯,太。哎,一杠原生GS行情事件。哎,先做一个复习。在这里呢,哎,我们来写几个按钮好,按钮一啊,复制几个啊,按钮二。按钮三。哎,给上几个ID。三啊,那按钮写好之后,哎,我们在这个script标签里面开始给这几个按钮,哎,绑定时间,哎,先看第一种方式啊,使用什么呢?使用这个。
01:13
嗯,首先要获取到这个按钮,哎,这个倒母元素嘛,我们获取这个元素之后才能去给它设置这个事件啊,哎。艾 Bt1,哎,等于。Document get。B填一,那接下来我们使用第一种方式,哎,使用这个哎绑定一个克雷克事件,哎,这里面接受一个事件的一个哎匿名函数,哎我们在这里a lot按钮一。被点击了,来接下来我们运行一下啊。是不是,哎,按钮一被点击了,那接下来回过来继续写我们的代码啊,这是我们第一种方式,哎,使用这个函数。
02:05
接着是看我们的第二种方式啊,是直接绑定时间啊。那我们复制一下啊,把它改成二。都改成二。那第二种方式我们使用什么呢?直接使用这个啊,可利就是。使用on加事件类型的方式,哎,让它等于。一个方喜啊。来我了。把这个画拿来。按钮二被点击了,好,这个应该是二啊,我们来试一下刷新。点击。哎,这个事件也绑定成功了,哎,这是我们第二种绑定事件的方式。哎,就是使用这个啊,这个on什么什么好,那接着看我们第三种的这个试点管理方式,哎,直接使用啊,就是说在属性中。
03:07
啊,标签属性中啊,使用这个on click,好,那这个我们就不用给ID了啊,直接给一个on函数。然后让它执行一个DEMO,哎,执行一个这么一个函数啊。哎,当然现在没有这个函数啊,我们来在这里写一下啊,方形。DEMO。把这个改一下。哎,因为我们在点这个事事件这个按钮三的时候,会触发这个的个事件,然后执行这个DEMO函数,我们来测试一下。是不是可以的啊,这是我们原生GS绑定事件的三种方式啊,那这几种方式我们在里面可不可以用呢?哎,我告诉大家啊,都可以用,我们来试一下啊。
04:05
来。比如。我们复制一个啊。二杠这个。CD绑定事件。在这里面我们来写啊好,接下来我们来先来尝试第一种方式来使用这个,好,那接下来我是不是要呃给这个he一个DD title对吧,那接着我在这里啊,去写这个绑定事件啊绑定事件。哎,首先还是要啊,先获取到,哎,我们的这个。啊,H1。啊title啊,通过ID获取到H1,然后使用H1的这个这个属性来绑一个雷克事件啊。嗯,我的一下啊,点击事件。
05:11
我们来运行一下。好,现在我们来点它,看看能不能弹出来可以的是吧?哎,我们第一种方式绑定时间是可行的,那我们接着来把它换成第二种啊,第二种是直接来给这个h he这个节点使用on click。来这样去绑定,来看一下这种方式可不可以啊,找到这个浏览器,我们来刷新一下啊。刷新好之后再点击可以看到,哎,第二种方式也是可以的啊好,那接下来。我们来看一看,哎,第三种方式啊。就是使用这个函数的方式。啊,这个我先注释掉啊。嗯,我来写一个这个这个函数啊函数。啊。就说把这个删了。
06:01
接下来我要在这里面。哎,写一个这个什么呢。Uncle click是不是,哎,Uncleli哎,等于这个DEMO是这样的吧,是吧,来我们来看一下啊,现在哎,刷新,把这个调试工具打开,找到conslo,首先看到一个报错啊,他说。呃。你这个昂可click啊,写的不对,你是不是要写这个on click大写的,就是说小透风的这种方式啊,哎,这就是RA的一个特点,也就是说我们在写这个事件的时候啊,都要使用啊,这个小驼峰的一个方式,就是和传统的事件相比,哎,就像我们写那个class的时候,我们要在这个里面写class name。哎,是一样的啊,这个规范大家要记住,所以这里我们要把它改成这样的一个方式,那接下来我们再来诶刷新再来点击一下试试。哎,一刷新还没点呢,就报错了,他说你这个昂可Li它呢需要接收的是一个这个函数,但是你给了他一个字符串。
07:04
好,那这是什么问题,我们来看一下啊,我们先分析一下,哎,首先这个东西啊,这个是我们哎类组件,哎,我们这个东西。然后再看这个Fi在里面是吧,所以我们这里面写的是什么,这里面写的是GS叉的一个语法,也就是在render的时候,它会执行这些代码,对不对,而我们这里既它语法呢,它是把这个的一个结果给了他,你这里是不是给了一个字负相当于。是不是相当于就给了他一个代步字符串给他了。啊,跟我们原生GS不一样,原生GS的话,它这里是就当做这个,就会找这个对应的一个函数,我们这里是GS差啊,啊GS差。哎,所以大家可能,哎,就会了啊,那你不写这个大括号啊,不写这个双引号,你要想想给他一个啊,这个一个就是表达式的一个结果的话。是不没有使用这个花括号,是这样的吧,啊来我们使用花括号,可以看到这个颜色已经对了啊,那接下来我们来。刷新一下看一下啊,诶,我一刷新可以发现已经执行了是吧,而且就把我们的代码给阻断了。
08:06
哎,那我们这里换成一个,换成一个log吧,要不然这个阻断我们代码,这个不好进行啊,啊,Log来看一下啊。刷新一下是不是被点击了,我还没点呢,它就被点击了,那我当然啊,这个点的时候,哎,也没有生效。说明什么,说明我们这个事件啊,绑定的有问题。啊,那我来分析一下,为什么不能这么绑定,首先我们要哎理清一个概念,我们这里它并不是这种,哎原生的这种al代码对不对,它是这个GS差好最后我们在就是说render,我们在return这个的时候,它会去这里面去执行对应代码对不对,把这个对应相应的变量啊,相应的这个呃表达式给计算对吧?好,那所以这里面大括号里面这里它会就是说要的什么呢?它是要这个表达式,也就是我们这个函数的一个执行结果,对吧?你这样加上这个括号,这个函数会执行的,它是把这个函数的返回值给到了他。
09:02
哎,相当于类似一个赋值的操作,对吧,那函数的反馈值,这个函数是不是就执行了,执行了是不是就哎这里就输出了。是不是这样的啊,所以我们这里不能加这个括号啊,我们直接把函数名给他就可以了,把函数名给他,这样当我们点的时候才会触发这个函数,才会执行这个函数。清楚吧,我们再来试一下来。刷新哎,首先没有输出来,我们点的时候,你看输出了对不对,哎这样我们的事件才绑定是正确的。啊来呃,稍微啊总结一下啊,这点一定要注意啊,在这写个注释啊。绑定这个事件函数的时候啊,不要加这个画括号啊,加这个画括号。就立刻执行了啊。好。其实我们这个里面它要的是什么?要的是一个表达式的一个运算的一个结果,就执行了一个结果对吧,就是会把这个结果赋值给到他,哎,所以你不能加划括号,你加花括号这个函数就执行了。
10:09
是不是要拿啊,这里要注意啊啊。那接下来我们来说一下这三种绑定事件,哎,在relax里面都行,那我们使用哪一种啊,推荐使用这一种,那为什么不使用前两种呢?大家可以看一下前两种在不断的去获取这个啊,就是说使用document啊,不断的使用document以前获取的元素在绑定这知识点,而我们学习这个之前就说过它的这个特点,我们尽可能的就是不去。哎,这个和原生的这个这个真实的这个道产生一个交互对吧?啊,这里是没有办法才这么用啊,因为原核呢,没有提供选择性,哎,我们只在这里去做一个选择器啊,去绑定一个这个容器,只有这个时候才会用到其他的地方我们尽可能的不要去用。清楚了吧啊。来,我给你写一下啊。可以使用啊。
11:02
这种方式但是不推荐啊,甚至是不要这么去使用啊。啊,不要这么去使用啊。哎,这是要注意的一点,哎,我们使用这种函数的方式。通过这个他的这个on click。这个首先我们这样来绑定这个事件。这里大家先简单了解一下哎,React中如何去绑定事件就行了,在后面的章节我们会单独拿出一个章节来讲他的这个事件,哎,是如何绑定的哎,为什么要使用这种小作风等等,都会做一个详细的一个说明,哎,这里大家先知道哎通过这种方式可以去绑定事件哎,为了我们的这个例子去进行下去就可以了。
我来说两句