onClick 不适用于 Material-UI Tooltip 中的 Popper 组件答案

【问题标题】：onClick is not working on Popper component in Material-UI TooltiponClick 不适用于 Material-UI Tooltip 中的 Popper 组件
【发布时间】：2020-04-30 15:33:15
【问题描述】：

预期的行为是在单击工具提示时转到另一个页面。为了实现这个功能，我为 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} />
        </>
        )}
    />
  );
};

【问题讨论】：

您的错误消息（和您的Props 界面）看起来像是您将click 属性传递给CustomTooltip，然后将其通过（通过{...props}）传递给Tooltip。这与您对 PopperProps 所做的事情无关。
感谢@RyanCogswell，错误消失了，但onClick 仍然无法正常工作。我还编辑了我的问题。
您将onClick 放在div that isn't part of the presentation of the tooltip 上。您想要定位的 div 是 this one ，没有任何方法可以提供额外的道具。我认为你最好直接使用Popper 而不是Tooltip。
@RyanCogswell 所以如果我想实现这个功能，我似乎需要 fork material-ui？
Forking Material-UI 听起来像是一个相当极端的解决方案。一种选择是在 title 中放置更多 html 并将点击处理程序放在其中。

标签： reactjs material-ui popper.js

【解决方案1】：

您需要为Tooltip 提供interactive 属性。当interactive未指定时，Tooltipdisables pointer events（所以点击不做任何事情），但pointer-events设置为auto时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>
  );
}

【讨论】：

感谢您的宝贵时间，先生。