onClick 不适用于 Material-UI 工具提示中的 Popper 组件

Question

预期的行为是在单击工具提示时转到另一个页面。为了实现此功能，我为该对象提供了 onClick 属性PopperProps。

下面是我的代码：

interface Props extends TooltipProps{}

const CustomTooltip : React.FC<Props> = (props) => {
  const { arrow, ...classes } = useStylesBootstrap();
  const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.preventDefault();
    event.stopPropagation();
    console.log("clicked");
    window.location.replace('/info/contact-us');
  };

  return (
    <Tooltip
      classes={classes}
      PopperProps={{
        style: { border: "1px red solid" },
        onClick: handleClick,
        popperOptions: {
          modifiers: {
            arrow: {
              enabled: Boolean(arrowRef),
              element: arrowRef,
            },
          },
        },
      }}
      {...props}
      title={(
        <>
          {props.title}
          <span className={arrow} ref={setArrowRef} />
        </>
        )}
    />
  );
};

Answer 1

您需要提供interactive的道具Tooltip。interactive未指定时，Tooltip 禁用指针事件（因此单击不会执行任何操作），但pointer-events设置为当Interactive 为 trueauto时。当您将鼠标从触发元素移动到 时，该道具还可以防止立即关闭。interactiveTooltipTooltip

这是一个工作示例：

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

export default function SimpleTooltips() {
  return (
    <div>
      <Tooltip
        interactive
        title={
          <div onClick={() => console.log("clicked tooltip text")}>Delete</div>
        }
      >
        <IconButton aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}