javascript - 如何在立即单击按钮时不显示工具提示？

Question

更新:这似乎是一个用户体验问题，我在 GitHub 上创建了一个问题，您可以在这里跟踪:

https://github.com/reactstrap/reactstrap/issues/910#issuecomment-374369572

---

我正在使用 Reactstrap。

我只想在鼠标悬停 2 秒后显示工具提示。当我立即单击按钮时，我不想显示它。

但现在当我立即点击按钮时，它会显示工具提示。

我尝试了受控的 Tooltip 和 UncontrolledTooltip，但都不起作用。

对于Tooltip，我尝试添加onClick={() => {}}，但也无济于事。

如何在立即点击按钮时不显示工具提示？谢谢

Live demo

  constructor(props) {
    super(props);

    this.state = {
      isTooltipOpen: false
    };
  }

  onToggleTooltip = () => {
    const { isTooltipOpen } = this.state;
    this.setState({ isTooltipOpen: !isTooltipOpen });
  };

  render() {
    const { isTooltipOpen } = this.state;

    return (
      <div>
        <p>
          <button id="controlledTooltip">Controlled Tooltip</button>
        </p>
        <p>
          <button id="uncontrolledTooltip">Uncontrolled Tooltip</button>
        </p>

        <Tooltip
          delay={{ show: 2000, hide: 0 }}
          isOpen={isTooltipOpen}
          placement="right"
          target="controlledTooltip"
          toggle={this.onToggleTooltip}
          // onClick={() => {}}
        >
          Discard draft
        </Tooltip>

        <UncontrolledTooltip
          placement="right"
          target="uncontrolledTooltip"
          delay={{ show: 2000, hide: 0 }}
        >
          Hello world!
        </UncontrolledTooltip>
      </div>
    );
  }

Answer 1

使用 setTimeOut() 函数。为防止丢失上下文 (this)，使用箭头函数作为一种简单的方法来保留正确的执行上下文。

setTimeout(() => {
    this.setState({ isTooltipOpen: !isTooltipOpen });
}, 2000);

查看更新、工作、示例:https://codesandbox.io/s/j4ojkyv3l3

你也可以看看https://www.npmjs.com/package/react-hover-observer .这是一个 React 组件，用于通知其子组件悬停交互。它还支持延迟悬停和悬停关闭，这有助于减少意外触发。