Question

我正在尝试创建一个无限（至少3-4）个嵌套菜单。问题是当我将鼠标悬停在菜单项上时，它不响应第一个创建的菜单列表，只有最后一个嵌套的菜单悬停了，要返回，我需要再次单击以关闭嵌套菜单，直到到达父菜单为止。更改另一个菜单项。

下面的代码显示了如何递归创建新菜单

const RecursiveMenu = (props: IRmenu) => {
  const {
    data,
    anchorEl,
    handleClose,
    status,
    handleClick
  } = props;
  const [menuDepth2, setMenuDepth2] = React.useState();
  const [open, setOpen] = useState(false);
  const [identifier, setId] = useState(-1);
  const [anchorEl2, setAnchorEl2] = React.useState < null | HTMLElement > (null);
  const handleClick2 = (event: React.MouseEvent < HTMLElement > ) => {
    setAnchorEl2(event.currentTarget);
  };

  const handleClose2 = () => {
    setAnchorEl2(null);
  };

  //  console.log(nestedMenu[0].children)
  const depth2Props = {
    data,
    identifier,
    open,
    setId,
    anchorEl,
    setData: setMenuDepth2,
    setOpen,
    handleClose: handleClose,
    handleClick: handleClick2,
    status,
  }
  const styledMenu = {
    data: menuDepth2,
    anchorEl: anchorEl2,
    handleClose: handleClose2,
    status: false,
    handleClick: handleClick2
  }

  return ( <
    div style = {
      {
        marginLeft: 30
      }
    } >
    <
    NestedMenuTemplate { ...depth2Props
    }
    /> {
      data &&
        <
        RecursiveMenu { ...styledMenu
        }
      /> 
    } <
    /div>
  );
};

const NestedMenuTemplate = (props: ITemplate) => {
  const {
    data,
    setId,
    setData,
    setOpen,
    anchorEl,
    handleClose,
    handleClick,
    status,
    identifier
  } = props;
  var StyledMenu = status ? StyledMenuDown : StyledMenuRight
  const classes = StyledMenuItem()
  return ( <
    StyledMenu id = "customized-menu"
    anchorEl = {
      anchorEl
    }
    keepMounted open = {
      Boolean(anchorEl)
    }
    onClose = {
      handleClose
    } >
    {
      data &&
      data.map((item: IItemListType, id: number) => {
        return ( <
          MenuItem style = {
            {
              background: id === identifier ? "red" : "white"
            }
          }
          dense key = {
            id
          }
          button onMouseOver = {
            (event: React.MouseEvent < HTMLElement > ) => {
              setId(id);
              setData(data[id].children);
              setOpen((prevOpen: boolean) => !prevOpen);
              handleClick(event);
            }
          } >
          <
          ListItemText primary = {
            item.item
          }
          />

          {
            data && < ArrowRight / >
          } <
          /MenuItem>
        );
      })
    } <
    /StyledMenu>
  );
};
export default NestedMenuTemplate;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

React Material UI，向右嵌套菜单箭头

0 个答案: