我们如何在第一次加载页面时打开 Popper

Question

使用 https://material-ui.com/components/popper/ React，material-ui，我想在页面加载后立即显示 Popper，而不是单击按钮。

import React from 'react'
import Popper from '@material-ui/core/Popper'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Fade from '@material-ui/core/Fade'
import Paper from '@material-ui/core/Paper'

export default function PositionedPopper() {
  const elRef = React.useRef(null)

  return (
    <div>
      <Popper open={true} anchorEl={elRef.current} placement={'left'} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography>The content of the Popper.</Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
      <Button ref={elRef}>left</Button>
    </div>
  )
}

此代码在屏幕左上角显示弹出窗口，因为 onInit，anchorEl 为 Null

如何设置anchorEl组件第一次加载？

Answer 1

使用状态而不是参考

export default function App(){
   const [el, setEl] = useState(null);
   const [open, setOpen] = useState(true);
   return (
     <div>
        <button ref={setEl} onClick={()=> setOpen(true)}></button>
        <Popper open={el != null && open} anchorEl={el}>
           ....
        </Popper>
     </div>
   )
}

Answer 2

使用 useEffect 初始化 open status 会起作用

const [open, setOpen] = useState(false);
useEffect(() => {
  setOpen(true);
}, []);

<Popper
  open={open}
  ...
/>

完整代码：

import React, { useEffect, useState, useRef } from "react";
import Popper from "@material-ui/core/Popper";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Fade from "@material-ui/core/Fade";
import Paper from "@material-ui/core/Paper";

export default function PositionedPopper() {
  const elRef = useRef(null);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    setOpen(true);
  }, []);
  return (
    <div>
      <Popper
        open={open}
        anchorEl={elRef.current}
        placement={"left"}
        transition
      >
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography>The content of the Popper.</Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
      <Button ref={elRef}>left</Button>
    </div>
  );
}

我们如何在第一次加载页面时打开 Popper

How can we open a Popper when page load the first time

javascript

ref

reactjs

material-ui

popper.js