根据打开的父Popper组件有条件地显示工具提示

问题描述

我正在尝试根据同级组件Popper是否打开来有条件地显示工具提示的最佳方法。我想在其子ButtonBase悬停时默认显示它。如果Popper打开，我希望工具提示从不打开。工具提示标题是在Popper关闭时在Popper选项列表中选择的内容的摘要，将其打开并打开Popper并不理想且混乱。我是钩子的新手，因此尝试了解如何结合钩子以根据条件需要正确设置tooltipOpen状态。

export default function TooltipWithPopper() {
  const classes = useStyles();
  const [anchorEl,setAnchorEl] = React.useState(null);
  const [value,setValue] = React.useState([options[1],options[11]]);
  const [pendingValue,setPendingValue] = React.useState([]);
  const [tooltipOpen,setTooltipOpen] = React.useState(false);

  const handleClick = (event) => {
    setPendingValue(value);
    setAnchorEl(event.currentTarget);
    setTooltipOpen(false);
  };

  const handleClose = (event,reason) => {
    if (reason === "toggleInput") {
      return;
    }
    setValue(pendingValue);
    if (anchorEl) {
      anchorEl.focus();
    }
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "github-label" : undefined;

  return (
    <React.Fragment>
      <div className={classes.root}>
        <Tooltip title={value.map((i) => i.title).join(",")}>
          <ButtonBase
            disableRipple
            className={classes.button}
            aria-describedby={id}
            onClick={handleClick}
          >
            <span>Label</span>
            {value.length}/{options.length}
          </ButtonBase>
        </Tooltip>
      </div>
      <Popper
        id={id}
        open={open}
        anchorEl={anchorEl}
        placement="bottom-start"
        className={classes.popper}
      >
        <Autocomplete
          open
          onClose={handleClose}
          multiple
          classes={{
            paper: classes.paper,option: classes.option,popperDisablePortal: classes.popperDisablePortal
          }}
          value={pendingValue}
          onChange={(event,newValue) => {
            setPendingValue(newValue);
          }}
          disableCloseOnSelect
          disablePortal
          renderTags={() => null}
          noOptionsText="No labels"
          .....
        />
      </Popper>
    </React.Fragment>
  );
}

这是工具提示应用于触发元素的演示。如何根据其他组件的状态将其设置为仅打开？我尝试在打开setTooltipOpen(false)时调用handleClick时添加一个Popper调用。

演示：https://codesandbox.io/s/material-demo-forked-0wgyh?file=/demo.js:0-6181

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）