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

Question

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

下面是我的代码：

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

您需要为 Tooltip 提供 interactive 属性。当未指定 interactive 时，Tooltip disables pointer events (so click doesn't do anything), but pointer-events is set to auto when interactive is true。当您将鼠标从触发元素移动到 Tooltip.

时，interactive 属性还会阻止 Tooltip 立即关闭

这是一个工作示例：

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

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

onClick is not working on Popper component in Material-UI Tooltip

reactjs

material-ui

popper.js