Material-UI 启用按钮后工具提示自动打开（意外显示）

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

Material-UI 启用按钮后工具提示自动打开（意外显示）

Material-UI Tooltip automatically opens (displays unexpectedly) after button got enabled

tooltip

reactjs

material-ui