Question

我试图将鼠标悬停在图标上显示弹出窗口。我尝试从此处https://material-ui.com/components/popover/#mouse-over-interaction改编代码。我的解决方案如下。我试图消除项目设置的某些复杂性，但是为了清楚起见，不得不添加一些其他内容。

export interface Props {
  popoverAnchor?: HTMLElement;
  setPopoverAnchor: (anchor?: HTMLElement) => void;
}

render（）

const {
  popoverAnchor,
  setPopoverAnchor
} = this.props;


const open = Boolean(popoverAnchor);

return(

...

  <div className={classes.flex}>
    <HelpOutlineIcon
      aria-owns={open ? 'mouse-over-popover' : undefined}
      aria-haspopup="true"
      onMouseEnter={(event: any) => {
        setPopoverAnchor(event.currentTarget)
      }}
      onMouseLeave={() => setPopoverAnchor()}
    />
    <Popover
      id="mouse-over-popover"
      className={(classes.popover)}
      classes={{
        paper: classes.paper,
      }}
      open={open}
      anchorEl={popoverAnchor}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'left',
      }}
      onClose={() => setPopoverAnchor()}
      disableRestoreFocus
    >
      <Typography>I use Popover.</Typography>
    </Popover>
  </div>

constants.ts

export const SET_POPUP_ANCHOR = 'SET_POPUP_ANCHOR';
export type SET_POPUP_ANCHOR= typeof SET_POPUP_ANCHOR;

store.ts

export interface State {
  anchor?: HTMLElement;
}

actions.ts

export interface SetPopupAnchor {
  type: constants.SET_POPUP_ANCHOR;
  anchor?: HTMLElement;
}

export type Action = SetPopupAnchor;

export function handlePopoverAnchor(anchor?: HTMLElement): SetPopupAnchor {
  return {
    type: constants.SET_POPUP_ANCHOR,
    anchor: anchor
  }
}

DemoContainer.ts

export function mapDispatchToProps(dispatch: Dispatch<actions.AnonymizationAction>) {
  return {
    setPopoverAnchor: (anchor?: HTMLElement) => dispatch(actions.handlePopoverAnchor(anchor))
  }
}

这根本无法创建任何弹出窗口，并且控制台上没有出现错误。调试后，我看到element对象成功地一直进行到handlePopoverAnchor操作，这意味着状态应该已更改。

重大用户界面弹出窗口无法在锚点上打开

0 个答案: