React - 如何点击外部关闭工具提示

Question

这是我当前的工具提示。

我正在使用反应电源工具提示

当我单击按钮时，我可以关闭工具提示。

但我想在单击工具提示外部时关闭工具提示。

我该怎么做呢？

应用程序.js

import "./styles.css";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useState } from "react";

export default function App() {
  const [showTooltip, setShowTooltip] = useState(true);
  return (
    <div className="App">
      <button
        className="post-section__body__list__item__right__menu-btn"
        onClick={() => {
          setShowTooltip((x) => !x);
        }}
        style={{ position: "relative" }}
      >
        <MoreHorizIcon />
        <TooltipList show={showTooltip} />
      </button>
    </div>
  );
}

工具提示列表

import React from "react";
import Tooltip from "react-power-tooltip";

const options = [
  {
    id: "edit",
    label: "Edit"
  },
  {
    id: "view",
    label: "View"
  }
];

function Tooptip(props) {
  const { show } = props;
  return (
    <Tooltip
      show={show}
      position="top center"
      arrowAlign="end"
      textBoxWidth="180px"
      fontSize="0.875rem"
      fontWeight="400"
      padding="0.5rem 1rem"
    >
      {options.map((option) => {
        return (
          <div
            className="tooltop__option d-flex align-items-center w-100"
            key={option.id}
          >
            {option.icon}
            <span style={{ fontSize: "1rem" }}>{option.label}</span>
          </div>
        );
      })}
    </Tooltip>
  );
}

export default Tooptip;

CodeSandbox：
https://codesandbox.io/s/optimistic-morning-m9eq3?file=/src/ App.js

更新1：
我根据答案更新代码。
现在可以单击外部来关闭，但是如果我单击按钮来关闭工具提示，则它不起作用。

应用程序.js

import "./styles.css";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useState } from "react";

export default function App() {
  const [showTooltip, setShowTooltip] = useState(true);
  return (
    <div className="App">
      <button
        className="post-section__body__list__item__right__menu-btn"
        onClick={() => {
          setShowTooltip((x) => !x);
        }}
        style={{ position: "relative" }}
      >
        <MoreHorizIcon />
        <TooltipList
          show={showTooltip}
          onClose={() => {
            setShowTooltip();
          }}
        />
      </button>
    </div>
  );
}

工具提示列表.js

import React, { useEffect, useRef } from "react";
import Tooltip from "react-power-tooltip";

const options = [
  {
    id: "edit",
    label: "Edit"
  },
  {
    id: "view",
    label: "View"
  }
];

function Tooptip(props) {
  const { show, onClose } = props;

  const containerRef = useRef();
  useEffect(() => {
    if (show) {
      containerRef.current.focus();
    }
  }, [show]);

  return (
    <div
      style={{ display: "inline-flex" }}
      ref={containerRef}
      tabIndex={0}
      onBlur={(e) => {
        onClose();
      }}
    >
      <Tooltip
        show={show}
        position="top center"
        arrowAlign="end"
        textBoxWidth="180px"
        fontSize="0.875rem"
        fontWeight="400"
        padding="0.5rem 1rem"
      >
        {options.map((option) => {
          return (
            <div
              className="tooltop__option d-flex align-items-center w-100"
              key={option.id}
            >
              {option.icon}
              <span style={{ fontSize: "1rem" }}>{option.label}</span>
            </div>
          );
        })}
      </Tooltip>
    </div>
  );
}

export default Tooptip;

Codesandbox
https://codesandbox.io/s/optimistic-morning-m9eq3?file=/src/App.js:572-579

Answer 1

正如我所看到的，您正在使用material-ui作为图标，因此在material-ui中有一个名为ClickAwayListner的选项

应用程序.js

import "./styles.css";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import TooltipList from "./TooltipList";
import { useState } from "react";

export default function App() {
  const [showTooltip, setShowTooltip] = useState(true);
  const handleClickAway = () => {
    setShowTooltip(false);
  }
  return (
    <div className="App">
      <ClickAwayListener onClickAway={handleClickAway}>
        <button
          className="post-section__body__list__item__right__menu-btn"
          onClick={e => {
            e.stopPropagation();
            setShowTooltip((x) => !x);
          }}
          style={{ position: "relative" }}
        >
          <MoreHorizIcon />
          <TooltipList show={showTooltip} />
        </button>
      </ClickAwayListener>
    </div>
    
  );
}

用以下材料包裹容器ClickAwayListener