00:00
科,我们来给这个todo list案例添加一些其他的交互,我们想一想,诶,当我们鼠标悬浮到这个上面的时候,是不是应该凸显出来,我当前鼠标是在这个上面对吧?一般常见的做法是给他,哎换个背景色啊,或者让它这个有一些阴影啊,对不对?好,而且当我们把鼠标悬浮到这上面的时候,这个删除按钮是不是也应该出来。我们来写一下,那我们既然是鼠标悬浮上面,你要让它改变一个背景色,哎,或者出现这个按钮,而当鼠标离开的时候,就要让它消失。是不是要给这个item,给他一个鼠标移入的一个时间,哎,移入的时候显示还要给他一个移出的时间,对吧?移出的时候你消失对吧,那我移处显示移出消失,移入显示对不对啊,而且大家想一想,呃,我们是不是得有一个啊标记来标记我的鼠标是不是移入到这上面了,对吧?那我移入的时候,比如是处离开的时候是false。是不是这样的,你看我移入处移出false。
01:00
我们一个一个来啊,首先我移入和移出啊,那是不是我来给他。写一个鼠标的一个移入事件和一个鼠标移出的事件,因为我要在移入的时候我去改变这个状态,哎,就是标记改成触是吧,我移入了,那我在鼠标离开的时候,我要改变这个状态,把这个状态改成false,哎,证明我鼠标离开了是不是这样的。那写代码。找到item item在哪,是不是list里面的这个item在这里面,对吧,那你要给这个Li鼠标移入和移出来,我们写这个事件。On live是不是鼠标移出事件,好,On。Enter,是不是鼠标已入事件对不对啊,那当鼠标哎离开的时候,我来调一个函数啊hand。Mo啊,鼠标的一个处理。我给他传一个什么,你鼠标离开了,我就给你传一个false可以吧,好,那你同样的,那你鼠标你移入了,我给你个处。
02:08
接下来来定一个函数啊。处理鼠标移入。已出的回调啊。等一下这个函数。赋值语句加箭头函数啊。这里我既然传了参数,那这里是不是得有一个来接收的一个东西。我们先输出它看一看啊。来看一下啊,运行一下。打开控制台。可以看到这里是不是,哎输出了这个first处。对吧,那我还没鼠标还没移入呢,还没出呢,怎么就输出了呢,而且这里还有很多的报错。是不是回想一下之前我们说的,哎,给这个事件,我们是要给他一个函数。
03:01
对吧,要给它一个函数,给他一回的函数才行,那这里我加了括号,是不是直接就执行了对吧?这个函数又没有return,那所以这里是相当于给他一个安范的对不对,所以它会报错对吧?那这里我们就要使用这种,哎,高阶函数啊,Return一个,你不是要函数吗?我给你return一个函数行不行?这时候就不会报错了啊,那接下来我们来看一看这个效果啊,把这个放这里面,只有这样的话,鼠标我移入的时候,哎,才会执行这个函数,哎执行这个函数,那移出的时候也会执行它。这时候来看一下。把这先清空一下啊。刷新是不是不报错了,现在我移入是不是true,离开是不是first,哎,我们这个标识现在就处理好了,你看移入是不是处离开这个false那。怎么样能让这个页面去发生变化呢?是不是我们得给这个组件去定义一个状态对吧?我们状态存储的数据,哎,数据的改变就是状态的组件,状态的改变会引起这个视图重新渲染,是不是状态驱动的这个视图嘛。
04:06
定一个状态。初始化状态。诶,大家可以发现啊,我为什么把状态定义到这个子组件里面了,哎,不再定义到APP里面了,嗯,这个是如果你这个状态只有你这个组件自己在用,你就定义到组件的内部。清楚了吧,因为APP里面的我们定义的这个状态list是不是要用。是不是,而且你还点可能也要去操作这个数据是吧,所以这个我们就定义到了副组件上面,而这个状态鼠标一入一出的这个状态,那是不是只有这个item在用啊,这也是我们在定义组件的时候,我们要考虑的一个事情啊,这个状态到底放在子组件还是负组件啊,记住一个原则,如果有很多组件都要用,哎,大家都要用,那我就放到副组件里对不对?如果我定义的这个状态只有我自己在用,只有这个子组件自己在用,那我就放到自己组件里面。清楚了吧,哎,类的。
05:04
等一个MOS啊,默认呢,我让它等于false,因为默认我们鼠标一般是没有放上去的是不是。接下来那你鼠标如果放上来或者离开,我就去修改你的这个状态就可以了啊,This there set。State。等于谁flag啊?这样的话,我就修改了他的状态。当我状态发生改变。我是不是就能驱动的页面的一个显示。对吧,那你现在你还驱动不了,因为你这里是定义的这个状态,但是你有用吗?有用的吗?没有用吗?那么是不改用的,它既然是一个标识,我们就可以通过这个标识去来呈现页面不同的一个展示。对不对,首先我们给它加一个背景色,背景色的话呢,我直接在这里去写这个style叫什么style,哎,外面是一个。标识对吧,这里面我要写这个GS表达的是那态,我们要写对象,嗯,给他什么呢,背景啊。
06:02
冒号,哎。背景色,我让它的值是什么值,你不能直接写,你直接写就写死了,我要根据你的这个状态来判断。是不是根据你那个状态来判断,哎,如果你鼠标是放上了,也就是说你的状态是处,我给你显示个背景,否则的话我就不显示了,就完了。所以哎,这时候你要判断这个Z点。State里面的Mo。哎,如果你等于处,那我给你一个背景,否则的话就什么都不显示,背景给什么值呢?啊,我们先随便写一个,先看效果好吧,先给个白色。是不是有用,你看。好吃吧?啊。就是当我鼠标放上面的时候,这里会把这个状态改成触,你看如果你是触的时候就会显示这个背景对不对,但这个颜色不好看,我们来换一个啊。我们来用一个透明色啊,随便给个000,然后透明0.1,哎,这样就会好看好看一些啊。
07:05
这时候再来看一下。是不是好看一些了啊,至少我们能看到这个效果对不对,那接下来是要处理什么,是要处理这个按钮,当我鼠标放上去的时候,这个按钮上显示对吧?来。一样的啊,都是用来判断,但是呃,这里也要用,这里也要用,我再写这么长比较麻烦,哎,所以我可以提前呃。把它从。里面给结构出来对不对?等于this.state。啊,这个写错了啊。那这里我就可以直接只写这个变量就可以了,好,那这里第4PLAY也不能直接大了,你也要判断诶如果你放上去了,那你就要block,你要显示。是不是如果你离开了,你就隐藏?你看blog很难,我们来控制它的显示和隐藏,来刷新一下看看。是不是有了,你看。
08:00
放进去是不是有了鼠标,我离开是不是就没了?这样我们鼠标一入一出就写完了啊,当然。大家看一下啊。其实有很多种方案去实现这种移入移出,使用GS是最笨的一种方式啊,但是这里我们是在学习react,也想让大家去多练一练这个GS啊,一般的话我们其实用CSS就可以了,CS是不是有这个悬浮,有how哎,用CSS去控制这个样式的显示就可以。当鼠标悬浮到Li上的时候,去改变它的背景色对吧,Li冒号毫就可以对不对?然后how,你不仅可以影响自身,你还可以去影响它的这个子元素,或者它相邻的元素等等都可以啊,这个可以作为一个呃任务,大家自己去练一练。知道吗?你通过这个号啊,你不仅可以去改变自己的背景色,你还可以去呃,影响你的这个子节点或者兄弟节点的一个样式,哎,比如我悬浮LL是可以通过CS,我来决定它是否显示和隐藏的。清楚吧,那这个可以,呃,大家下去练一练啊,那这里为了让大家熟悉react,所以这里我们是用的GS的写法,用的react的写法来写的啊好,大家可以跟着这个练一练,练完这个GS的版本,你可以再写一版这个CS的版本,那这节课就说到这里。
我来说两句