相关疑难解决方法(0)

我正在使用 Material-UI 菜单。它应该可以正常工作，但只需使用鼠标悬停，而不是单击。这是我的代码链接：https : //codesandbox.io/embed/vn3p5j40m0

下面是我尝试过的代码。它可以正确打开，但在鼠标移开时不会关闭。

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div>
      <Button
        aria-owns={anchorEl ? "simple-menu" : undefined}
        aria-haspopup="true"
        onClick={handleClick}
        onMouseEnter={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
        onMouseLeave={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

export default SimpleMenu;

我刚刚开始与反应电镀。我目前正在使用material-ui进行我的navBar并做出反应。当我将鼠标悬停在菜单上时，将显示下拉菜单。但是为了关闭下拉菜单，我必须单击下拉菜单的外部。我希望能够在将鼠标悬停在下拉菜单之外或移至其他菜单选项（在这种情况下，应显示另一个下拉菜单）时关闭该下拉菜单。像这样的东西：https : //www.palantir.com/

我环顾四周，但找不到解决方案。这是我最近得到的：Material-ui：通过事件悬停打开菜单

我尝试使用相同的技术，并将其添加到我的代码中，但无济于事。有什么建议么？谢谢！

编辑：我在这里重新创建了我的问题：https : //react-xmaiyw.stackblitz.io 单击“为什么我们”时可以看到问题。

 handleClick = (event) => {
 event.preventDefault();

   this.setState({
    open: true,
    anchorEl: event.currentTarget,
   });
 };

handleRequestClose = () => {
  this.setState({
   open: false,
  });
};

render() {
return (
  <FlatButton
  onClick={this.handleClick}
  onMouseOver={this.handleClick}
  onMouseLeave={this.handleRequestClose} //When I add this line of 
     //code, it keeps flickering very fast almost as if drop-down 
     //doesn't open
  label="Why Us?"
/>
)}