移动友好的 Material UI 弹出按钮菜单

Question

我有一个在桌面上运行良好的 Material UI 按钮/弹出菜单 - 但在移动设备中，悬停功能不起作用。

我不确定从 UX 角度处理此类问题的最佳方法是什么 - 如果我需要添加自定义触摸事件或以某种方式捕获移动模式以允许双击？

https://codesandbox.io/s/flamboyant-night-t9hdy

此沙箱显示在桌面模式下稳定的菜单

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import Button from "@material-ui/core/Button";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuItem from "@material-ui/core/MenuItem";
import MenuList from "@material-ui/core/MenuList";
import Badge from "@material-ui/core/Badge";

import "./PopOverMenu.scss";

class PopOverMenu extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = { open: false, anchorEl: null };
  }

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

  hide = (event) => {
    this.setState({
      open: false
    });
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

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

  handleListKeyDown = (event) => {
    if (event.key === "Tab") {
      event.preventDefault();
      this.setState({ open: false });
    }
  };

  showMenuItems = () =>
    this.props.menu.map((item, i) => (
      <MenuItem key={i} onClick={this.handleClose}>
        <NavLink to={item.value}>{item.label}</NavLink>
      </MenuItem>
    ));

  render() {
    return (
      <div className="popover-menu">
        <Button
          aria-controls={this.state.open ? "menu-list-grow" : null}
          aria-haspopup="true"
          onMouseEnter={this.show}
          onMouseLeave={this.hide}
          href={this.props.rootLink}
        >
          <Badge badgeContent={this.props.badgeCount} color="primary">
            {this.props.icon}
          </Badge>
        </Button>

        <Popper
          onMouseEnter={this.handleOpen}
          onMouseLeave={this.handleClose}
          placement="bottom"
          anchorEl={this.state.anchorEl}
          open={this.state.open}
          role={undefined}
          transition
          disablePortal
        >
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              style={{
                transformOrigin:
                  placement === "bottom" ? "center top" : "center bottom"
              }}
            >
              <Paper>
                <ClickAwayListener onClickAway={this.handleClose}>
                  <MenuList
                    autoFocusItem={this.state.open}
                    id="menu-list-grow"
                    onKeyDown={this.handleListKeyDown}
                  >
                    {this.showMenuItems()}
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
      </div>
    );
  }
}

export default PopOverMenu;