我不了解React.js的onMouseEnter事件

Question

我有以下代码

import React from "react"

export default class App extends React.Component {
    render() {
        return (
            <div>
                <img onMouseEnter={() => console.log("entered")} src="https://www.fillmurray.com/200/100" />
            </div>
        )
    }
}

为什么仅当我第一次将鼠标悬停在图像上时，此功能才起作用，因此，无论用鼠标进入或离开图像多少次，我都只会在控制台中打印一个“输入”。但是由于某种原因，如果我将其更改为：

<img id="imga" onMouseLeave={() => console.log("left")} onMouseEnter={() => console.log("ent")} src="https://www.fillmurray.com/200/100" />

即我还添加了一个onMouseLeave事件，然后它可以正常工作，并且每次我将鼠标悬停在图像上时，都会在控制台上打印“输入”。有人可以向我解释这种行为吗？如何在每次鼠标悬停时不使用onMouseLeave触发onMouseEnter事件？

谢谢您的帮助。

Answer 1

onMouseOver = {（）=> {