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

问题描述

我正在使用 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>

可以看出，内部有一个插入符号的跨度，插入符号应该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

标签： javascriptreactjsmaterial-uipopuppopover

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

问题描述

解决方案

推荐阅读