如何使用 onMouseHover 更改我的跨度状态？

Question

我目前正在通过使用 document.getElementById('heart').innerHTML = 'favorite'; 引用它来更改我的 span 的状态

有更好的方法吗？如果是这样，请与我分享您的解决方案。我的代码写在下面。

import React from 'react'

//custom  functions
const heartHover = (e)=>{
    document.getElementById('heart').innerHTML = 'favorite';
}
const heartNotHover = (e)=>{
    document.getElementById('heart').innerHTML = 'favorite_border';
}
const Navbar = () => {
    return (
        <div>
              <span id="heart" onMouseOver={heartHover} onMouseLeave={heartNotHover} class="material-icons">
                            favorite_border
              </span>
                  
        </div>
    )
}

export default Navbar

Answer 1

当你使用事件监听器时，你需要useEffect + clean它们。

检查这个解决方案： Hide and Show modal on mouseenter and mouseleave using React Hooks

以及本指南： https://www.pluralsight.com/guides/how-to-cleanup-event-listeners-react

如何使用 onMouseHover 更改我的跨度状态？

How can i change my spans state using onMouseHover?

javascript

function

reactjs

arrow-functions