我有以下table作業正常。
現在客戶端已請求，如果用戶單擊icon（以藍色突出顯示），則所選內容row應popup垂直顯示。知道怎么做。我是初學者react。
uj5u.com熱心網友回復：
請參考以下使用 material ui popover 組件的示例
import * as React from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
export default function BasicPopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popover' : undefined;
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Open Popover
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
</div>
);
}
您可以參考此鏈接材料 ui并以您的方式對其進行自定義
uj5u.com熱心網友回復：
我已經完成了彈出視窗的簡單實作。我不理解垂直彈出，所以我實作了一般的彈出。
鏈接：https : //jsfiddle.net/himanshu1024/hyvqkfwu/2/
這里的問題是，只有在選擇/保存一行時才會顯示彈出視窗，如果 selectedRow 為 NULL，則NULL&&<div id="popup"></div>將是false，因此不會顯示彈出視窗。
您還可以在此處查看其他類似代碼：https : //www.c-sharpcorner.com/article/how-to-create-a-modal-pop-up-in-reactjs-appliaction/
這是一個視頻解釋：https : //www.youtube.com/watch?v=i8fAO_zyFAM
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/368869.html
標籤：javascript 反应 用户界面 html-table 反应钩子
上一篇：Unity中的小白框