我希望這個彈出器在單擊“復制鏈接”按鈕時顯示,讓用戶知道它已被復制,但在一兩秒后自行消失。這是popper的代碼
import * as React from 'react';
import Box from '@mui/material/Box';
import Popper from '@mui/material/Popper';
export default function SimplePopper() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick}>
Copy Link
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
Link Copied
</Box>
</Popper>
</div>
);
}
uj5u.com熱心網友回復:
你也許可以用setTimeoutin做一些事情handleClick。
嘗試handleClick像這樣修改:
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
setTimeout(() => setAnchorEl(null), 3000);
};
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/529662.html
