如何在鼠标点击位置显示菜单？

Question

我试图在 div 中鼠标点击的位置显示自定义菜单，但这似乎不起作用，可见逻辑有效，但是当我点击 div，菜单只在排版下打开。菜单是要放在别的地方吗？

这是它的显示方式 - menu under Typography，当点击 div 上的任何地方时菜单显示在同一个地方，而它应该在鼠标点击的位置

下面的例子是我目前的例子，我删除了很多代码，这样更容易阅读。


interface PositionState {
  x: number;
  y: number;
}

function WebAppTypeCard({
  id,
  name,
  image,
  description,
  image_url,
}: WebAppCardTypeProps) {
  const [visible, setVisible] = useState<boolean>(false);
  const [webApps, setWebApps] = useState<IWebApp[]>([]);
  const [position, setPosition] = useState<PositionState>({ x: 0, y: 0 });

 useEffect(() => {
    fetch(`${process.env.REACT_APP_API_URL}/webapp/read_all/${id}`, {
      headers: headers,
    })
      .then((data) => {
        return data.json();
      })
      .then((res) => {
        setWebApps(res);
      });
  }, []);


  const handleClick = (e: any) => {
    if (webApps.length > 1) {
      setPosition({ x: e.clientX, y: e.clientY }); // <--- on mouse click set position and set visible to true
      console.log(position);
      setVisible(true);
    } else {
      window.open(selectedWALink);
    }
  };

  const handleMouseLeave = () => {
    setVisible(false);
  };

  const style = (x: number, y: number) => {
    return {
      top: x,
      left: y,
    };
  };

  const Menu = () => {
    return (
      <div style={style(position.x, position.y)}>
        {webApps.map((a) => {
          return (
            <div key={a.id} onClick={() => handleMenuClick(a.link)}>
              {a.name}
            </div>
          );
        })}
      </div>
    );
  };

  return (
    // <Tooltip title={description} enterDelay={500} placement="top" arrow>
    <div
      className="cardContainer"
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
    >
      <div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
          }}
        >
          <img
            className="appImg"
            src={image_url}
            width={65}
            height={65}
            style={{ paddingTop: 15 }}
            alt="Image not found"
          />
        </div>
        <div
          style={{
            paddingTop: 10,
            width: 110,
            textAlign: "center",
            marginLeft: 8,
            marginRight: 15,
          }}
        >
          <Typography noWrap variant="body2" gutterBottom>
            {name}
          </Typography>
        </div>
        {visible ? <Menu /> : null} // <---- Show Menu
      </div>
    </div>
    // </Tooltip>
  );
}

export default WebAppTypeCard;

Answer 1

你不能把位置设置为固定的，然后根据用户点击的位置使用CSS的顶部和左侧定位吗？然后在用户点击时将可见性设置为真，如果可见性已经为真，则将其隐藏，并在下一次点击时更新它的顶部和左侧位置。

我不确定如何在 React 中执行此操作，但这就是我在 Angular 中修复它的方法！

如何在鼠标点击位置显示菜单？

How to show menu on position of mouse click?

javascript

css

typescript

reactjs