仅在右键单击时触发 Chakra UI 菜单

Question

是否可以从文档中修改示例以在右键单击（上下文菜单）上而不是普通单击的菜单触发？

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Actions
  </MenuButton>
  <MenuList>
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
    <MenuItem>Delete</MenuItem>
    <MenuItem>Attend a Workshop</MenuItem>
  </MenuList>
</Menu>

Answer 1

如果您正在寻找如何使菜单作为上下文菜单工作，请执行以下操作：

function ContextMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Menu
      isOpen={isOpen}
      onClose={() => {
        setIsOpen(false);
      }}
    >
      <Button
        onContextMenu={(e) => {
          e.preventDefault();
          setIsOpen(true);

          const menu = document.querySelector("[role=menu]");

          const popper = menu.parentElement;

          const x = e.clientX;
          const y = e.clientY;

          Object.assign(popper.style, {
            top: `${y}px`,
            left: `${x}px`
          });
        }}
      >
        Right click to open
      </Button>
      <MenuList
        onAnimationEnd={(e) => {
          const menu = document.querySelector("[role=menu]");
          menu.focus();
        }}
      >
        <MenuItem>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Attend a Workshop</MenuItem>
      </MenuList>
    </Menu>
  );
}

本质上，您需要首先删除绑定到默认单击事件的 MenuButton，然后添加新按钮以触发上下文菜单。