00:00
好了各位啊,在做完了添加一个突度之后啊,我们开始琢磨这么一个问题,就是每一个to度,哎,就是你要做的事儿都能有哪些交互呢?首先说一个简单的交互,就是我鼠标悬浮在吃饭这个人身上,同学首先吃饭这个todo是不是得高亮,其实所谓的高亮呢,就是改一下背景色,能突出显示一下对不对,我们简称高亮,然后呢,如果你鼠标悬浮在吃饭这个人身上,吃饭后边的那个删除按钮是不是应该出现呀?哎,这是一个样式上的交互,对吗?好,我们先实现这个来写代码之前呢,我说一下,如果听视频的各位啊,听到这还没有动手敲,我给你个建议,先把这一小节的视频暂停,你去敲,敲到跟我一样的效果了,然后你再继续听,别把东西都压到最后是吧,哎,如果说老师我现在诶条件不允许,身边没电脑,我正在拿手机听呢,那你可以接着听下去,OK,好嘞,怎么实现呢。放在谁身上,谁高亮后边的删除按钮出现,那怎么办呀?同学首先理性的分析这个问题,存不存在鼠标同时放在了吃饭和睡觉两个人身上,说老师这是不是就是啊,不是,它会识别你鼠标,哎,那个箭头前面那个点,所以说同学是不存在鼠标同时放在了吃饭和睡觉这两个人身上呢?
01:19
啊,这块你一定要清楚,然后呢,同学实现的方法其实有很多,我说一个比较容易让人接受的方法啊同学就是你说我鼠标如果放在这儿,然后咔这么往下一滑,你说整体的效果是不是就是吃饭高亮,睡觉高亮,然后打代码高亮,然后逛街高亮,当鼠标脱离这些人的时候,那就吃饭取消高亮,睡觉取消高亮,打代码取消高亮对不对?哎,整体这么一个诶效果,那所以说同学我的设计就是给每一个凸度,像吃饭呢,睡觉啊,打代码啊,给每一个人都添加一个鼠标移入和移出时间。同学,你说我鼠标如果一上来就在这儿,是不是没有在任何一个凸度里边触发鼠标移入事件,如果这么一写,同学鼠标是不是移入了,鼠标只要一入了,你是不是做一个标识,标识一下啊,鼠标移入了,然后呢?
02:13
写一个判断,如果鼠标一入了,我就把背景改成什么样,我就显示那个删除按钮,诶,这是一个实现的方式,那来,我们写着回到代码当中,你得找到item吧,你不是在操作每一个todo项吗?好了,同学,给谁绑定事件呢,Li?啊,Li不就是每一个item吗?对吧?每一个todo像吗?啊,绑定这么几个事件啊,一个叫做on live,就是鼠标离开的时候,那再写一个叫做on Mo enter,就是鼠标移入,一个是离开,一个是移入,对吗?好,那来看着啊,无论是鼠标的移入还是移出,我都这么写this.handle Mo Mo有鼠标的意思对吗?我调用handle Mo的时候,如果传的是true,就代表鼠标移入了,那如果我调用这个handle Mo的时候,我传的如果是false,就代表鼠标移出了啊,那当然我得改一下这个是移出,所以说它应该是false,那这是in inter,那这应该写成呢,叫做tre是吧?先绑定这个移入事件吧,对吧?让代码可读性高一点走啊,那同学不能光说你是不得有这个handle MOS啊,那所以说来吧,走定。
03:31
E这个handle mouse复制语句加箭头函数,同学这么写肯定不行,为啥呀,你想一下啊,同学我在这儿可以consolo,你这是不是传了一个true or false一个标识啊,比如说它叫做flag啊flag这flag是干嘛的呀?区分一下鼠标到底是移入了还是移出了,对吧?你要这么写啊,就有意思了啊你把这flag呢在这输出好回到页面中,同学我还哎你刷新我还没有一入一出呢,这怎么出放出放这这啥情况?同学是不是咱说在指定事件回调的时候,不是说你不能写小括号,你写倒是也行,说你调用,但是你得保证这个人的返回值得是一个函数,所以说怎么办?是不是写成高阶呀?哎,我给你return这么一个函数,哎,Flag我是不是收到了,好,那如果鼠标真的一入了,同学,那你说react帮你调的是不是这个函。
04:31
住啊,哎,OK,那我在这就可以consolelo输出这个flag啊flag好了,我们试一下啊,看着啊,首先来到这呢,刷新,我鼠标先不进去啊,走同学,走是不是划住这个吃饭了,我再拿出去走是不是false,哎,我已经知道鼠标到底是进来了还是出来了,对吧?那如果鼠标进来了,那我就得在状态中维护一个变量,标识着鼠标到底是有没有在当前这个item身上,那所以说呢,我就叫这个名字叫做MOS啊,就叫做MOS1上来呢,肯定是forces,就是鼠标没有在任何人的身上,对吗?如果说你的鼠标滑入了吃饭,那你告诉我接下来怎么办?鼠标滑入了吃饭,我问大家是不是会触发handle mouse,然后就拿到了一个flag值,那你说你需要做的是不是就更新那个状态就可以了呀,this.set state。
05:31
走,把那个Mo的值调成这个flag,哎,那这样的话呢,就能标识一下鼠标到底是进来还是没进来,对吗?如果要是进来,我问你传递的是不是,那这是不是就改成true了?那如果鼠标拿走了,这是变成false,那这是不是false呀?好,那也就意味着同学来借助开发者工具,我们瞄一眼,打开item身上是不是有一个state叫做Mo,现在鼠标没有在任何人的身上,所以说它是false,对吗?来,我放在吃饭里边走,是不是变成pro了?我再拿出去走是不是变成false了?虽然它反应慢一点啊,但是也是有效果的是吧?好了,能够标识了鼠标到底进来还是没进来,那接下来的事情就非常简单了呀,同学啊,Li是不是得给它上点样式啊?我们要改的是什么?什么叫高亮呢?是不是改背景颜色,那我问一下背景颜色高亮,假设让它是那种灰色淡灰色,那同学鼠标一用是不是得变成淡灰色鼠标移出。
06:31
是不是得变成白色呢?哎,好了,那这怎么写呢?你不能写死对吧,到底什么颜色你得问一下,怎么问呢?this.state.mo对吧?问一下鼠标进来了吗?啊,进来了那就是井ddd,哎,一个非常淡的灰色是吧,咱管这灰色叫什么叫奶奶灰是吧?啊white如果没进来那就是白色好了,那你看一下效果啊同学,现在啊,我鼠标没进入到任何人的里边来走,哎,效果是不是出来了,哎你看诶频繁的滑也没问题,哎滑出去那就都没了是吧?哎,就可以了,那这块呢,还可以写的再好一点,就是你可以提前呀,在这个位置this.sp读出这个Mo。
07:17
啊,那在这呢,就不用写的这么麻烦了,就直接问鼠标进来了吗?啊,进来了灰色,那没进来呢,那白色完事,OK,好,那同学还有一个东西就是这个,哎,鼠标如果进来了,那你就不能隐藏了,鼠标拿走了你再隐藏对吗?那所以说这呢也不能写死,这不那删除按钮吗?对吧?那怎么问呢?Mo啊,你进来了吗?如果进来了,那就不能是none了,Display block啊那如果不是呢,那就是no好了,来,那我们看一下效果啊,划到这儿刷新一下,注意看啊走。放在谁身上谁高亮对不对,而且呢,后边那个删除按钮也得出现对不?哎,好,就这么一个效果啊,都拿走啊,那就没了啊,同学啊,写这个案例呢,我得承认方法的名字呀,实现的思路啊,其实不是完全就你必须得跟我一样的OK,你可以自己下去,去自由发挥一些东西,但是有些东西是不能太自由发挥的,你就比如说同学这一堆todos,你就不能给他放在list子里边,放在list里边,同学,那你试着你去写一写,你看你怎么能实现让hier组件给他传东西,兄弟之间咱还没学那种通信方式呢,对不对,哎,好了,那这是每一个item的悬浮效果啊,那这小节呢,我们先停一下啊。
我来说两句