/

在React中处理组件上的DOM事件

在React中处理组件上的DOM事件

我想根据鼠标悬停状态来显示或隐藏一个小面板。

当我悬停在链接上时，面板会显示出来。

然后我可以用鼠标进入这个面板，当我移开鼠标时，面板会隐藏起来。

就像Twitter上的个人资料，在鼠标悬停在一个人的名字上时会显示出来：

对于触发面板显示的<a>元素，我添加了onMouseEnter事件：

1
2
3
4
5
<a
 onMouseEnter={() => {
 setShowCard(true)
 }}
>flavio</a>

所以当我用鼠标悬停在它上面时，面板会显示出来，因为它是根据我之前设置的showCard状态变量来显示的：

1
const [showCard, setShowCard] = useState(false)

然后我有一个ProfileCard组件，但是我不能简单地这样做：

1
2
3
4
5
6
7
8
<ProfileCard
onMouseEnter={() => {
 setShowCard(true)
}}
onMouseLeave={() => {
 setShowCard(false)
}}
/>

因为它不起作用。ProfileCard不是一个DOM元素，所以它无法响应被触发的事件。

我必须将onMouseEnter和onMouseLeave作为props传递给ProfileCard组件，然后在组件内部找到可以接收这些事件的正确DOM元素，并在那里附加事件处理程序。在这种情况下，我使用了容器div：

1
2
3
4
5
6
7
8
const ProfileCard = ({
 onMouseEnter,
 onMouseLeave
}) => (
 <div
 onMouseEnter={onMouseEnter}
 onMouseLeave={onMouseLeave}>
 ...

现在当离开面板时，它会隐藏起来。

tags: [“React”, “DOM events”, “components”, “onMouseEnter”, “onMouseLeave”]