00:00
好了各位,我们继续去写这个案例,刚刚写到这儿了,在构造器当中,我对状态进行了一个初始化的动作。哎,那所以说在这儿呢,给大家补上一个注释,这一步叫做初始化状态,我也按照他的要求,在这儿呢写了一个对象啊,对象里边是一组一组的k value6,不过目前我只能用到一个,就是天气热不热,所以说我写了一个A字hot,那么在这一步呢,我读取了这个状态,那所以给大家写这么一个注释,叫做读取状态,那在这儿呢,就不说了,是不是做判断,从而呢决定显示什么东西,右键打开这个网页。我们借助开发者工具呢,去看一下啊,来到这叫做components,你的组件在这对吗?你点一下瞧。你这个组件状态里边都有什么样的数据,都给你罗列在这儿了。你可以测试一下,在这个里边呢,你加一个属性wind微风,哎,就展示今天这个风的信息,那你回头来看东西就来了,这儿呢展示的是props信息,我们还没有讲props,我也没给他传props,所以说这儿呢,你别关注了,这儿的是哪个版本渲染的,诶我们更关注的目前只有这儿。
01:20
好,回到代码当中,把微风呢给它删掉,还记得我们的需求吗?你点击这个H1标题的时候,要进行一个动态的切换,所以说你觉得接下来的着手点在哪啊?同学们是不是应该在这儿给这个标题加上一个点击事件,在点击事件的回调里边,你想办法把状态中的A字号值取反,是不是就可以了呢?那所以说接下来的第一件事就是琢磨一下如何给这个标题加上点击事件。别急啊,先不给大家讲解react里边如何做事件绑定,我把它关掉,我们复习一个东西,就是原生事件绑定,有几种方式,原生事件绑定走写一个非常简短的小案例,页面上有三个按钮,分别叫做按钮一、二、三,前两个按钮呢,我分别给它们设置一下ID。
02:28
还有它按钮一叫做BTN1。这叫二,写一段脚本,我的需求是这三个按钮。点击的时候都有一个弹窗展示,所以说第一步你得获取到按钮,先用这个按钮一啊获取到它走加点击事件,我先用一个最繁琐的方式啊,但是它的兼容性是最好的。
03:05
Click点击对吗?走,你只要敢点我就敢弹窗,弹出的就是按钮一被点击了。来看一下效果走。点击按钮一被点击了。来,那再写按钮二,同理啊,这一堆复制这叫二,这叫二,这呢也得改一下,我不用这种方式了,用一个稍微简单的方式,直接写on click可以吧,附一个回调,如果你点了,那就是按钮二被点击了。右键打开。点击按钮二,OK也没问题,再说按钮三,按钮三就让它再简单一点,直接在标签里边写上on click属性,然后我写这么一个东西,什么意思?
04:03
当你点击按钮三的时候,我就把这两个引号里边的JS语句拉出来执行,诶就这意思。好,那你得保证你有一个DEMO函数对吗?没有,肯定会报错的呀,走DEMO里边做一件事,弹窗展示的信息在这儿。按钮几啊三。好,我们看一下效果啊。点击按钮三,诶是不是也没问题啊,好,这是原生绑定事件的三种方式,那么说说react里边怎么玩呢?其实从理论上来说,这三种啊,你都能用,但是react里边更加推荐的呢,是这种形式。就是直接在标签里边写他。诶说老师那前两个能不能用呢,其实也能来我们测试一下,回到咱们这个里边来。
05:01
我呢,简单写给he来个ID,比如说呢,叫做title标题。好了,在下方写好获取到这个节点title,给它加上事件,先用繁琐的click,我在这儿呢,打印一个log啊,叫做标题被点击了,看看能不能出效果啊,打开。控制台开好。点击这个title走可不可以可以好,在测试第二复制来到这儿,这先注掉啊,还是获取title,但是不用这种形式了,点直接写on click给一个回调里边做同样的事,保存,回头刷新一下页面,点击是不是也可以好。
06:00
虽然这两种方式都可以,但是尽量大家不要写,因为毕竟呢,我们在学习react,你在这儿总写这些东西,document.document点你都用上了react,你还是满屏的document,这就不太合适,同学们,哎,那所以说这两种不是说不能用也可以啊,不是说你用了react说哎原生里的,哎可能一些写法是不是就不行了呀,啊不是的,这种最原始的方式还是支持的啊,但是尽量不写,也就是说呀,同学我们尽量避免写这种东西。你整个应用当中,如果你写的非常棒,只出现一次这个东西就是在这里。因为react没给你提供选择器语法,你这还不这么写,你就写不下去了,对吧,那所以说这两种能用,但是我们不用,那用哪个呢?哎,第三种。那好了,来吧,我们把这些东西全都照搬照抄过来,放到这儿,不给ID了啊,直接给uncle click,那同学你要这么玩的话,你觉不觉得DEMO函数你也得一并带过来呀,好,复制把它关掉,来到这儿走,那接下来我们看看这东西它能不能行啊,右键打开控制台上键走来吧,都不用你去点了,现在就已经有了不对的地方,你看一下啊,他说一个不被允许的事件监听属性谁呀,Uncle click。
07:28
他好像不让你写,你再往后读,他告诉你了,Did you mean,说兄弟,你是不是应该写这个呀?啊,说老师真有意思,不让我写uncle click,让我写on click,说老师,那不都一个东西吗?瞪大眼睛看这个C小写的,这个C大写的。哎,那这儿呢,我多说一下啊同学react呢,它做了一个事儿,就是把所有你原生啊HTML标签里的这些on什么什么,它都给你重新写了一份啊,它是这么设计的,如果你原来叫做on,小写的c click,那它的封装就是on,大写的click,原声是不是有一个叫做失去焦点叫做onl。
08:14
那么在react里面,你写的时候就得是on blur a b啊,BBL,这是它的设计,就如同啊,你原始的HTML里边指定类名得用class啊样式的类名,那你在react里边就得用class name,这是它的一些规矩。至于说原生好好的,为什么人家不用,非得逼着你要用这种东西呢?同学,你先别急,在我们的课件里边呀,来,我们打开课件看一眼啊,同学,走。在这儿呢,可见啊,刚刚被我关了打开。在课件里面呢,你往下找啊,我们单独有一个章节呢,就是给大家去讲解react里面的事件绑定,你往下找,这呢,关于事件处理,我们在这儿呢,会详细的说他为什么要做这个事儿,那目前呢,我们就直接把它用上好吧,来,那就开始写,按照它的规矩,这C呀,你得大写好,老师我按照要求改了保存,那我们再往下看啊,走回来还是不对。
09:19
啊,读还哪有问题呢,他说呀,这个on click啊,大写的这个C啊,Click,它的监听者必须是一个函数。但是我却得到了一个我不想要的string类型。怎么回事呢?很简单,你这写错了,不应该写字符串。啊说老师也就是意味着这块不能写一个字符串,得写一个函数是的。那所以说你说接下来怎么办呢?说老师那不对呀,原声他写的不是这个嘛,同学一再强调他不是原声啊,对吧,原声倒挺简单的,你等一会儿你点的时候,我就把这个引号里的东西当成JS代码去执行就得了,但是这儿不是,那所以说呢,你得这么写,把它带走删掉。
10:05
也就是说你得读出来这个DEMO这个函数对吗?说老师那明白了,得写花括号,诶对DEMO说老师小括号行啊,我们再去试试啊,来走。同学,你注意看啊。我现在还没点呢,哎,他就说什么按钮三被点击了,你看一下啊,来,我刷新走,我点了吗?我没点呢,你发现它就执行了是吧,这呢我改一下啊同学不用alert,因为alert呢会阻止页面的渲染,看起来这个样式不好看,我用一个colo,哎,我这么说叫做标题被点击了,这行吧,好了,那你注意观察同样的效果,我还没点呢,他就说被点击了,这是怎么回事呢?说一个细节上的问题,同学啊,他是这么干活的,你听我说他在帮你渲染组件的时候,React帮你拗了一个VI的实例,通过实例调用到了render,对吗?想拿到返回值就得执行蓝色框里的代码,你觉得呢,它就开始执行了啊,你是小写的he,你写了on click,你要把什么值付过来呀?啊,你要把这个函数调用的返回值付过来。
11:15
那所以说同学,人家在执行代码的时候,你看这终归是个赋值语句,你觉得呢?啊,赋值语句是不是要把右边的复制给左边的,那你右边是什么呢?你右边是一个函数调用表达式,所以说你这么写的结果就是把DEMO函数调用的返回值交给了on click作为回调。那我问你DEMO这个函数有没有返回值,其实有是不是find,你把fund交给了on click作为回调,那你这就不对了呀,所以说你刚才那个输出呢,是你这块加了小括号,导致函数调用了啊舒老师,那现在他能不能点呢?那你试试吧,走走走是没效果的,因为你把unde find作为他的回调了,那肯定不行啊,哼,也就说白了,现在你这么写就是等你点的时候,人家帮你调and find,说老师那不得报错吗?他底层做了处理,发现是and find,他就没有别的动作了,那所以说同学一句话,你得把小括号删了去,你这么写的含义就是,哎,这是个复值语句。
12:19
我要把右边的这个函数交给uncle click作为回调,等你点的时候我帮你调DEMO就可以了,好了,回头我们点一下走走走是不是就可以了呢?哎,所以说这块是你值得注意的一个点,就是react里边如何绑定事件,OK on click c要写大写的,C里边不要写小括号那种形式,不要直接去调函数,你只是指定好了这个函数,回头他帮你调,什么时候调啊,你点的时候他帮你调好了,这小节呢,我们先停一下。
我来说两句