onMouseOver 函数在 mouseOver 之前触发

Question

我正在尝试让 div 在悬停时更改 BarText 的值。在我的 app.js 中，我设置了这样的值。

const [BarText, setBar] = useState("test")

并且值和函数作为 props 传递给此代码所在的组件。

<NavLink
 to="/sol"
className="systemButton"
onClick={() => {
 setIn(true);}}
onMouseOver={props.setBar('stuff')}
>

目前，该功能正在运行，因为它确实将 BarText 的值从“test”更改为“stuff”，但是它不会在悬停时执行，它似乎在使成为。当我刷新页面时，BarText 已经显示为“Stuff”，表明该功能已经触发。当我将多个 onMouseOver 事件应用于不同的 div 时，BarText 将更改为组件中的最后一个。
看来我没有正确使用 onMouseOver，如果有人认为我的错误或知道替代方案，我将不胜感激。提前谢谢你。

Answer 1

改变

onMouseOver={props.setBar('stuff')}

至

onMouseOver={() => props.setBar('stuff')}

否则每次渲染时你都会调用该函数。

onMouseOver 函数在 mouseOver 之前触发

onMouseOver function firing before mouseOver

javascript

onmouseover

reactjs