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

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

当再次单击按钮时，它应该关闭，但它似乎不起作用，仅当在外部某处单击时才会关闭

代码如下：

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;

import React，{useState}来自“React”；
从“@material ui/core/Tooltip”导入工具提示；
从“@material ui/core/ClickAwayListener”导入ClickAwayListener；
从“@material ui/core/Button”导入按钮；
常量MyClass=（）=>{
const[open，setOpen]=useState（false）；
const handleTooltipClose=（）=>{
setOpen（假）；
};
const handleTooltipOpen=（）=>{
setOpen（真）；
};
返回(
点击
);
};
导出默认MyClass；

确保在儿童使用按钮时使用和

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

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

事件继续像往常一样传播，除非其中一个事件 侦听器调用StopRopagation（）或stopImmediatePropagation（）， 其中任何一个都会立即终止传播

---

只需将您的

handleTooltipOpen

函数重写如下：

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

因此，按钮不应打开工具提示，而应切换工具提示。 该按钮可触发

切换工具提示

功能

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

它将

打开状态设置为与当前状态相反的状态

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