当菜单没有悬停在反应时，我如何关闭菜单

Question

所以，我有一个菜单正在打开，当我 hover 在它上面时，但我希望它在我的鼠标在菜单或子菜单项之外时关闭（当鼠标悬停在菜单之外时我让它关闭，但是然后它在我真正使用它之前关闭）。 这是代码：

import React from 'react'
import styles from './Dropdown.module.css'

const Dropdown = ({children, className, style, value }) => {
    const [active, setActive] = React.useState(false)
    const [i, setI] = React.useState()
    const anchorRef = React.useRef()

    React.useEffect(() => {
        anchorRef.current.removeAttribute('href')
    },[])

    React.useEffect(() => {
        if (active) {
            setI(styles.active)
        }else{
            setI(null)
        }
    },[active])

    const stylesDropdown = [styles.li, className]

    //the function
    function handleActive() {
        setActive(!active)   
             
    }
    
    return <li className={stylesDropdown.join(' ')} style={style} 
    //when it's being called
    onMouseOver={handleActive} >
        <a href='/' className={styles.a} ref={anchorRef}>{value}</a>
        <span className={styles.span}>
          <i className={`fa-solid fa-sort-down ${i}`}></i>
        </span>      
        <ul className={styles.ul}>
            {active && children}
        </ul>
    </li>

    
}

export default Dropdown

Answer 1

nvm，解决了。 我将 function 从 !active 更改为 true 并且在 ul 结束时我使用了这个onMouseLeave ={() => setActive(false)