在react js中通过鼠标悬停打开和关闭下拉菜单

Question

我是 React JS 的新手。我的问题是，如果鼠标离开该区域，我希望菜单消失，所以我尝试onMouseOut关闭onMouseLeave菜单，但似乎当此选项存在时，菜单永远不会打开！但是，当我删除onMouseOver或离开时，它工作正常，但如果您不单击某些内容，它就会停留在那里。 MenuListProps={{ onMouseLeave:handleClose }}

发生这种情况是因为当我打开菜单时，模式布局被放置在整个页面上，这意味着该onMouseLeave事件将在onMouseEnter. 但为了让它工作，我必须更改菜单锚点，使其完全覆盖按钮

<div>
            {menuItem.map((text) => (
              <Button               
                onClick={(e) => handleChangeMenu(text, e)}
                onMouseOver={(e) => handleHover(text, e)}>
                {text}            
              </Button>
            ))}
            <Menu
              transitionDuration={700}
              anchorEl={project}
              open={Boolean(project)}
              onClose={() => {
                setproject(null);
              }}
              MenuListProps={{
                onMouseLeave: () => {
                  setproject(null);
                },
              }}
            >
              {mySubMenu.map((text) => (
                <MenuItem sx={menuItemStyle}>{text}</MenuItem>
              ))}
            </Menu>
          </div>

Answer 1

存在指定的材质组件ClickAwayListener。

您可以像这样添加鼠标离开事件处理程序

 <ClickAwayListener mouseEvent="onMouseDown" onClickAway={handleDropdownClickAway}>{your menu code}</ClickAwayListener>