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

Question

我在 Material-UI 中有一个 Popover，我想从中将锚点永久设置为一个按钮。不仅仅是点击 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

下面是分叉的codesandbox:

Answer 2

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

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

How to set Anchor to Popover in Material-UI

popover

reactjs

material-ui