如何在 Material-UI 中将锚点设置为 Popover

Question

我在 Material-UI 中有一个弹出框，我想将锚点永久设置为按钮。不仅仅是点击event.currentTarget。 我怎样才能用打字稿做到这一点？

不幸的是，Material-UI 中的当前示例使用 event.currentTarget 并且引用它不起作用。

import React,{useRef} from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    typography: {
      padding: theme.spacing(2),
    },
  }),
);

export default function SimplePopover() {
  const classes = useStyles();

  const ref = useRef(null)


  return (
    <div>
      <Button ref={ref}  variant="contained" color="primary">
        Open Popover
      </Button>
      <Popover
        open
        anchorEl={ref}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <Typography className={classes.typography}>The content of the Popover.</Typography>
      </Popover>
    </div>
  );
}

Here 一个代码框。

Answer 1

你一定漏掉了一些细节。我关注了Simple Popover example in official docs，它仍然有效。

如果要使用useRef，请务必在设置anchorRef时参考buttonRef.current

下面是分叉的代码框：

Answer 2

两件事

• 您需要存储打开的弹出窗口的状态
• 从外面打开
• 从里面关闭它

相关JS：

import React, { useRef, useState } from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    typography: {
      padding: theme.spacing(2)
    }
  })
);

export default function SimplePopover() {
  const classes = useStyles();

  const ref = useRef(null);

  const [popOverVisible, setPopOverVisible] = useState(false);
  const togglePopOver = () => {
    popOverVisible === false
      ? setPopOverVisible(true)
      : setPopOverVisible(false);
  };

  return (
    <div>
      <Button
        ref={ref}
        variant="contained"
        color="primary"
        onClick={togglePopOver}
      >
        Open Popover
      </Button>
      Status: {popOverVisible.toString()}
      <Popover
        open={popOverVisible}
        anchorEl={ref}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
      >
        <Button
          ref={ref}
          variant="contained"
          color="primary"
          onClick={togglePopOver}
        >
          CLOSE Popover
        </Button>
        <Typography className={classes.typography}>
          The content of the Popover.
        </Typography>
      </Popover>
    </div>
  );
}

编辑：根据用户的以下评论：

      <Popover
    open={popOverVisible}
    anchorEl={ref}
    anchorReference="anchorPosition"
    anchorPosition={{ top: 50, left: 140 }}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "left"
    }}
    transformOrigin={{
      vertical: "top",
      horizontal: "left"
    }}
  >

分叉sandbox here