我想根据鼠标悬停状态来显示或隐藏一个小面板。
当我悬停在链接上时,面板会显示出来。
然后我可以用鼠标进入这个面板,当我移开鼠标时,面板会隐藏起来。
就像Twitter上的个人资料,在鼠标悬停在一个人的名字上时会显示出来:
对于触发面板显示的<a>
元素,我添加了onMouseEnter
事件:
<a
onMouseEnter={() => {
setShowCard(true)
}}
>flavio</a>
所以当我用鼠标悬停在它上面时,面板会显示出来,因为它是根据我之前设置的showCard
状态变量来显示的:
const [showCard, setShowCard] = useState(false)
然后我有一个ProfileCard
组件,但是我不能简单地这样做:
<ProfileCard
onMouseEnter={() => {
setShowCard(true)
}}
onMouseLeave={() => {
setShowCard(false)
}}
/>
因为它不起作用。ProfileCard
不是一个DOM元素,所以它无法响应被触发的事件。
我必须将onMouseEnter
和onMouseLeave
作为props传递给ProfileCard
组件,然后在组件内部找到可以接收这些事件的正确DOM元素,并在那里附加事件处理程序。在这种情况下,我使用了容器div
:
const ProfileCard = ({
onMouseEnter,
onMouseLeave
}) => (
<div
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
...
现在当离开面板时,它会隐藏起来。