Javascript 当我用鼠标删除菜单时，我无法单击某个菜单

嗨，我的菜单组件有问题。它应该是这样工作的： 鼠标悬停->菜单显示（您可以单击某些项目） OnMouseLeave->菜单应该隐藏

在我的情况下，当我鼠标移动时，我无法单击某些内容，我需要转到浏览器工具栏以隐藏我在“鼠标移动到”按钮上打开的菜单

import React, {useContext, useEffect} from "react";
import {withRouter} from "react-router-dom";
import {Button, Toolbar, Typography} from "@material-ui/core";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Auth from "@aws-amplify/auth";
import UserContext from "../../../UserContext";



function PopOverMenu(props) {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const user = useContext(UserContext);

    function handleClick(event) {
        if (anchorEl !== event.currentTarget) {
            setAnchorEl(event.currentTarget);
        }
    }

    function handleClose() {
        setAnchorEl(null);
    }


    return (
        <div>
            < Button
                aria-owns={anchorEl ? "simple-menu" : undefined}
                aria-haspopup="true"
                onClick={handleClick}
                onMouseOver={handleClick}
                onMouseLeave={handleClose}
            >
                <Typography>{user ? user.username : "unknown"}&nbsp;</Typography>
                <Menu
                    id="simple-menu"
                    anchorEl={anchorEl}
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                    MenuListProps={{onMouseLeave: handleClose}}
                >
                    <MenuItem onClick={()=>{
                        window.location = '/';
                    }}>
                            Zmena role
                    </MenuItem>
                    <MenuItem onClick={handleClose}>Nastavenia</MenuItem>
                    <MenuItem onClick={()=>{
                                if (window.confirm("Really Sign out?")) {
                                    window.location = '/';
                                    Auth.signOut();
                                }
                            }}
                        >
                            Sign Out
                    </MenuItem>
                </Menu>
            </Button>
        </div>
    )
}

export default withRouter(PopOverMenu);

import React，{useContext，useffect}来自“React”；
从“react router dom”导入{withRouter}；
从“@material ui/core”导入{按钮、工具栏、排版}；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@aws放大/Auth”导入Auth；
从“../../../UserContext”导入UserContext；
功能弹出菜单（道具）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
const user=useContext（UserContext）；
函数handleClick（事件）{
如果（Ancorel！==事件.currentTarget）{
Setancorel（事件当前目标）；
}
}
函数handleClose（）{
setAnchorEl（空）；
}
返回(
<按钮
aria owns={Ancorel？“简单菜单”：未定义}
aria haspoop=“true”
onClick={handleClick}
onMouseOver={handleClick}
onMouseLeave={handleClose}
>
{user？user.username:“未知”}
{
window.location='/'；
}}>
Zmena角色
纳斯塔维尼亚
{
如果（窗口确认（“真的注销？”）{
window.location='/'；
Auth.signOut（）；
}
}}
>
退出
)
}
使用路由器导出默认值（弹出菜单）；

按钮元素上有

onMouseLeave

事件。所以当你把鼠标从按钮上移开时，菜单就会关闭是的，我知道。但我是说菜单在Mosue离开按钮后会保持打开状态。哦，我明白了。我认为问题在于，当您将鼠标悬停在按钮上时，菜单元素被插入到主体上。您希望菜单作为按钮的子项插入。也许你也可以尝试将鼠标事件添加到菜单中？我试过了。但是没有什么变化，只有thx的帮助