在 React 中再次单击时关闭工具提示

Question

我创建了一个工具提示，当单击按钮时它会打开。

再次点击按钮应该会关闭，但好像不起作用，只有在外面某处点击时才会关闭。

这是代码：

import React, { useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Button from '@material-ui/core/Button';

const MyClass = () => {
  const [open, setOpen] = useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <React.Fragment>
      <ClickAwayListener onClickAway={handleTooltipClose}>
        <div>
          <Tooltip
            PopperProps={{
              disablePortal: true
            }}
            onClose={handleTooltipClose}
            open={open}
            disableFocusListener
            disableHoverListener
            disableTouchListener
            title="Add">
            <Button onClick={handleTooltipOpen}>Click</Button>
          </Tooltip>
        </div>
      </ClickAwayListener>
    </React.Fragment>
  );
};

export default MyClass;

Answer 1

确保在有子按钮时使用 stopPropagation and preventDefault

const handleTooltipClose = (e) => {
  e.stopPropagation();
  e.preventDefault();
  setOpen(false);
};

const handleTooltipOpen = (e) => {
  e.stopPropagation();
  e.preventDefault();
  setOpen(true);
};

The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

Answer 2

只需像这样重写您的 handleTooltipOpen 函数：

const handleTooltipOpen = () => {
          if( open ){
            setOpen(false);
          }else{
             setOpen(true)
          }
 };

Answer 3

所以按钮不应该打开工具提示，而是切换它。该按钮可以触发 toggleTooltip 函数

<Button onClick={toggleTooltip}>Click</Button>

和 toggleTooltip 函数看起来像

const toggleTooltip= () => {
    setOpen(!open);
  };

将 open 状态设置为与当前相反的状态。

在 React 中再次单击时关闭工具提示

Close tooltip when clicking again on it in React

javascript

tooltip

reactjs

react-hooks