启用按钮后，Material-UI Tooltip 会自动打开（意外显示）

Question

我认为按钮的状态更改（启用或禁用）是导致问题的原因。 我有 5 个操作按钮（创建、删除、编辑、保存和取消）。 除创建按钮外，所有按钮开始禁用。 当我单击“创建”按钮时，它会被禁用，而“保存”和“取消”按钮会被启用。当它发生时，会弹出保存或取消工具提示。有时它们都弹出，有时只弹出一个。 起初，我认为这是为了响应焦点事件而发生的。然后我尝试禁用对焦点事件设置 disableTriggerFocus={true} 的工具提示响应，但它不起作用。

这是ActionButton的代码：

import Tooltip from "@material-ui/core/Tooltip";

const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
  return (
    <>
      <Tooltip
        title={disabled ? "" : tooltip}
        placement="top"
        arrow
        disableTriggerFocus={true}
      >
        <Button onClick={onClick} disabled={disabled}>
          <ButtonIcon tag={buttonIcon} />
        </Button>
      </Tooltip>
    </>
  );
};

Answer 1

悬停工具提示的触发基于mouseOver and mouseLeave events。 mouseOver 事件会为禁用的按钮触发，但 mouseLeave 事件不会。当您将鼠标悬停在禁用按钮上时，它会触发打开工具提示，但是当您离开禁用按钮时，不会触发 mouseLeave 事件，因此工具提示会保持打开状态。

您的代码 (title={disabled ? "" : tooltip}) 在禁用时禁止显示工具提示文本，但工具提示仍认为它是“打开的”。然后，当您启用按钮时，工具提示的文本将恢复并立即显示。因此，发生这种情况的按钮取决于您在禁用时碰巧将鼠标悬停在哪些禁用按钮上。

您可以通过使用open、onOpen 和onClose 属性显式控制Tooltip 的open 状态来解决此问题。 onOpen 在Tooltip 认为它应该打开时触发，onClose 在Tooltip 认为它应该关闭时触发，但是您可以将此信息与其他信息（例如disabled 状态）结合起来以决定open 属性。

下面是ActionButton 的工作版本。 useEffect 调用用于处理单击按钮时工具提示打开的情况。如果按钮被单击禁用，则在离开按钮时onClose 不会触发，因为禁用按钮不会触发mouseLeave 事件，因此在这种情况下效果会处理关闭工具提示。

import Tooltip from "@material-ui/core/Tooltip";
import { useState, useEffect } from "react";

const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (disabled && open) {
      setOpen(false);
    }
  }, [disabled, open]);
  return (
    <>
      <Tooltip
        title={tooltip}
        placement="top"
        arrow
        onOpen={() => {
          if (!disabled) {
            setOpen(true);
          }
        }}
        onClose={() => setOpen(false)}
        open={open}
      >
        <Button onClick={onClick} disabled={disabled}>
          <ButtonIcon tag={buttonIcon} />
        </Button>
      </Tooltip>
    </>
  );
};

相关答案：

• Programmatically open Tooltip in Material-UI
• Is it possible to render a tooltip on a disabled Material-UI <Button> within a <ButtonGroup> without breaking the layout?