如何确定 Material UI 中的 popupState 是否已打开

Question

我正在使用 PopupState / Popover 来构建组件，它工作正常，但我需要更改图标，当弹出窗口打开或关闭时它应该显示不同的图标。

这是我的组件：

  <PopupState variant="popover" popupId="demo-popup-popover">
    {(popupState) => (
      <div className="details-button">
        <Button {...bindTrigger(popupState)}>
          click me!
          <span className="caret-down"></span> // <-- here is the icon, caret-down
        </Button>
        <Popover
          className="popover-container"
          {...bindPopover(popupState)}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center'
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'center'
          }}>
          <Box>
            <Typography onClick={openModal}>
              <span className="icon-16-bulletedList-mono"></span>
              create
            </Typography>
          </Box>
        </Popover>
      </div>
    )}
  </PopupState>

可以看出，有一个span里面有一个插入符号，当弹出窗口关闭时插入符号应该是caret-down，当它打开时插入符号应该是caret-up。

有没有办法找到这些信息？

添加了一个日志来打印 popupState 变量，但它没有有用的信息：

anchorEl: button.MuiButtonBase-root.MuiButton-root.MuiButton-text
close: ƒ ()
disableAutoFocus: false
isOpen: false
onMouseLeave: ƒ (e)
open: ƒ (e)
popupId: "demo-popup-popover"
setAnchorEl: ƒ (e)
setAnchorElUsed: false
setOpen: ƒ (e,t)
toggle: ƒ (e)
variant: "popover"
_childPopupState: null
_setChildPopupState: ƒ (e)
__proto__: Object

Answer 1

我不知道你的打开状态是什么，但我认为它是 anchorEl。

<span className={Boolean(anchorEl) ? "caret-up" : "caret-down"}></span>