TippyJS-React：如何右键单击打开上下文菜单

问题描述

我尝试使用tippyjs-react右键单击菜单：

For {i} IN RANGE 0    2
${x}=    Get Element Count    //tbody/tr
LOG  ${x}
Click Element    //tbody/tr`
END

我知道我需要将带有'contextmenu'的事件侦听器添加到子级并使用tippyInstance.show（）方法，但是如何获得对实例的访问权限？

解决方法

从时髦的文档中，您可以得到如下实例：

const rightClickableArea = document.querySelector('#container');

const instance = tippy(rightClickableArea,{
  content: 'Context menu',placement: 'right-start',trigger: 'manual',interactive: true,arrow: false,offset: [0,0],});

container是您要单击鼠标右键的元素的ID。

,

import React,{ useState } from "react";
import Tippy from "@tippyjs/react";
import "tippy.js/dist/tippy.css"; // optional
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyTippy />
    </div>
  );
}

const MyTippy = () => {
  const [visible,setVisible] = useState(false);
  return (
    <Tippy
      onClickOutside={() => setVisible(false)}
      visible={visible}
      placement="right-start"
      content={<span>Tooltip</span>}
    >
      <button
        onContextMenu={(e) => {
          e.preventDefault();
          setVisible(true);
        }}
      >
        My button
      </button>
    </Tippy>
  );
};