[英]How can we open a Popper when page load the first time
與https://material-ui.com/components/popper/反應,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
?
使用 state 代替參考
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>
)
}
使用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>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.