TippyJS-React：如何在 right-click 上打开 context-menu

Question

我尝试使用 tippyjs-react 做 right-click 菜单：

<Tippy
  placement={'right-start'}
  content={someConent}
  trigger={'manual'}
>
  {children}
</Tippy>

我知道我需要将带有 'contextmenu' 的事件侦听器添加到 children 并使用 tippyInstance.show() 方法，但我如何才能访问该实例？

Answer 1

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>
  );
};

TippyJS-React：如何在 right-click 上打开 context-menu

TippyJS-React: how to open context-menu on right-click

javascript

typescript

contextmenu

popper.js

tippyjs