React Material UI, вложенная стрелка меню справа - PullRequest
Новая
       12

React Material UI, вложенная стрелка меню справа

0 голосов
/ 25 октября 2019

Я пытаюсь создать бесконечное (как минимум 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>
...