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

我正在试图理解根据兄弟组件

Popper

是否打开，有条件地显示工具提示的最佳方式。我想在默认情况下将其显示在其子项

按钮base

的悬停位置。如果

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>
  );
}

导出默认函数TooltipWithPopper（）{
const classes=useStyles（）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
const[value，setValue]=React.useState（[options[1]，options[11]]）；
常量[pendingValue，setPendingValue]=React.useState（[]）；
const[tooltipOpen，setTooltipOpen]=React.useState（false）；
常量handleClick=（事件）=>{
设置PendingValue（值）；
Setancorel（事件当前目标）；
setTooltipOpen（假）；
};
const handleClose=（事件、原因）=>{
如果（原因==“切换输入”）{
返回；
}
设置值（pendingValue）；
如果（主播）{
主播焦点（）；
}
setAnchorEl（空）；
};
常量开=布尔值（主播）；
const id=open？“github标签”：未定义；
返回(
i、 标题）。加入（“，”}>
标签
{value.length}/{options.length}
您可以使用
工具提示笔
状态控制
工具提示
打开

道具值（具体实施取决于您），并提供条件，如果

弹出式按钮

打开，则自动，

工具提示

打开

属性值计算将忽略

工具提示笔

状态并分配

假

在下面的示例中，我通过

onMouseEnter

和

onMouseLeave

事件控制

tooltipOpen

状态

<Tooltip
  open={open === true ? false : tooltipOpen}
  title={value.map((i) => i.title).join(", ")}
>
  <ButtonBase
    disableRipple
    className={classes.button}
    aria-describedby={id}
    onClick={handleClick}
    onMouseEnter={() => setOpen(true)}
    onMouseLeave={() => setOpen(false)}
  >
    <span>Label</span>
    {value.length}/{options.length}
  </ButtonBase>
</Tooltip>

i.title）.join（“，”）
>
setOpen（真）}
onMouseLeave={（）=>setOpen（false）}
>
标签
{value.length}/{options.length}