Reactjs 材料ui 4.3.2关联菜单鼠标右键单击位置

使用带popper的材料ui 4.3.2菜单。我需要显示动态定位的菜单。我只是从MaterialUI修改了一个示例代码沙盒。在本示例中，当您选择一些文本时，将显示菜单。但没有定位。我想菜单需要用一个实际的DOM元素锚定。 我怎样才能做到

谢谢和问候

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

export default function FakedReferencePopper() {
  const [open, setOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState<null | any>(null);

  const handleClose = () => {
    setOpen(false);
  };

  const handleMouseUp = () => {
    const selection = window.getSelection();

    // Resets when the selection has a length of 0
    if (!selection || selection.anchorOffset === selection.focusOffset) {
      handleClose();
      return;
    }

    const getBoundingClientRect = () =>
      selection.getRangeAt(0).getBoundingClientRect();

    setOpen(true);
    setAnchorEl({
      clientWidth: getBoundingClientRect().width,
      clientHeight: getBoundingClientRect().height,
      getBoundingClientRect
    });
  };

  const id = open ? "faked-reference-popper" : undefined;

  return (
    <div onMouseLeave={handleClose}>
      <Typography aria-describedby={id} onMouseUp={handleMouseUp}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
        purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
        bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed
        dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam
        quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci,
        quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus
        finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan
        metus vel maximus consequat. Suspendisse lacinia tellus a libero
        volutpat maximus.
      </Typography>
      <Popper
        id={id}
        open={open}
        anchorEl={anchorEl}
        transition
        placement="bottom-start"
      >
        {({ TransitionProps }) => (
          <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
            <MenuItem onClick={handleClose}>Logout</MenuItem>
          </Menu>
        )}
      </Popper>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/Popper”导入Popper；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
导出默认函数FakedReferencePopper（）{
const[open，setOpen]=React.useState（false）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量handleClose=（）=>{
setOpen（假）；
};
const handleMouseUp=（）=>{
const selection=window.getSelection（）；
//当所选内容的长度为0时重置
如果（！selection | | selection.anchorOffset===selection.focusOffset）{
handleClose（）；
返回；
}
常量getBoundingClientRect=（）=>
selection.getRangeAt（0.getBoundingClientRect（）；
setOpen（真）；
塞坦科雷尔({
clientWidth:getBoundingClientRect（）.width，
clientHeight:getBoundingClientRect（）.height，
getBoundingClientRect
});
};
常量id=打开？“伪造参考提升阀”：未定义；
返回(
公共知识是一种美德，是一种美德
purus，bibendum坐在一个地方，在一个地方
这是一个非常复杂的问题，它是一个非常复杂的问题
多洛·波特提托·布兰迪·维勒·普鲁斯·维勒·维勒·马莱苏达·利古拉·纳姆
在奥奇发酵罐中的欧盟最终产品，
马萨修女修女洛博蒂斯，马萨修女修女修女修女，马萨修女修女修女修女修女修女，马萨修女修女修女修女修女修女修女修女
完成后，坐在一个设备上，不需要任何设备
这是一个自由的人
帕特·马克西姆斯。
{（{TransitionProps}）=>(
轮廓
我的帐户
注销
)}
);
}

---

菜单

内部使用类似于

波普尔

但基于

模态

组件的

Popover的定位机构类似于
Popper
，但不同。要在
Popper
中执行菜单，您应该查看

您可以使用由
纸张
组件包装的
菜单列表
，而不是使用
菜单

          <Paper className={menuClasses.paper}>
            <MenuList className={menuClasses.list} autoFocus>
              <MenuItem onClick={handleClose}>Profile</MenuItem>
              <MenuItem onClick={handleClose}>My account</MenuItem>
              <MenuItem onClick={handleClose}>Logout</MenuItem>
            </MenuList>
          </Paper>


import React from "react";
import Popper from "@material-ui/core/Popper";
import Typography from "@material-ui/core/Typography";
import MenuList from "@material-ui/core/MenuList";
import MenuItem from "@material-ui/core/MenuItem";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";

/* copied from https://github.com/mui-org/material-ui/blob/v4.3.2/packages/material-ui/src/Menu/Menu.js#L21 */
const useMenuStyles = makeStyles({
  /* Styles applied to the `Paper` component. */
  paper: {
    // specZ: The maximum height of a simple menu should be one or more rows less than the view
    // height. This ensures a tapable area outside of the simple menu with which to dismiss
    // the menu.
    maxHeight: "calc(100% - 96px)",
    // Add iOS momentum scrolling.
    WebkitOverflowScrolling: "touch"
  },
  /* Styles applied to the `List` component via `MenuList`. */
  list: {
    // We disable the focus ring for mouse, touch and keyboard users.
    outline: 0
  }
});

export default function FakedReferencePopper() {
  const [open, setOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState<null | any>(null);

  const handleClose = () => {
    setOpen(false);
  };

  const handleMouseUp = () => {
    const selection = window.getSelection();

    // Resets when the selection has a length of 0
    if (!selection || selection.anchorOffset === selection.focusOffset) {
      handleClose();
      return;
    }

    const getBoundingClientRect = () =>
      selection.getRangeAt(0).getBoundingClientRect();

    setOpen(true);
    setAnchorEl({
      clientWidth: getBoundingClientRect().width,
      clientHeight: getBoundingClientRect().height,
      getBoundingClientRect
    });
  };

  const id = open ? "faked-reference-popper" : undefined;
  const menuClasses = useMenuStyles();
  return (
    <div onMouseLeave={handleClose}>
      <Typography aria-describedby={id} onMouseUp={handleMouseUp}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
        purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
        bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed
        dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam
        quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci,
        quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus
        finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan
        metus vel maximus consequat. Suspendisse lacinia tellus a libero
        volutpat maximus.
      </Typography>
      <Popper
        id={id}
        open={open}
        anchorEl={anchorEl}
        transition
        placement="bottom-start"
      >
        {({ TransitionProps }) => (
          <Paper className={menuClasses.paper}>
            <MenuList className={menuClasses.list} autoFocus>
              <MenuItem onClick={handleClose}>Profile</MenuItem>
              <MenuItem onClick={handleClose}>My account</MenuItem>
              <MenuItem onClick={handleClose}>Logout</MenuItem>
            </MenuList>
          </Paper>
        )}
      </Popper>
    </div>
  );
}