import * as React from 'react';
import Box from '@mui/material/Box';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
import IconButton from '@mui/material/IconButton';
import VisibilityIcon from '@mui/icons-material/Visibility';
import Dialog from '@mui/material/Dialog';
export default function MasonryImageList({ data }) {
const itemData = data.map((image) => {
return {
img: image.url,
title: image.titre
}
})
return (
<Box id='Mansonry'>
<ImageList variant="masonry" cols={3} gap={8}>
{itemData.map((item, index) => (
<>
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
title={item.title}
actionIcon={
<IconButton
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
aria-label={`Agrandir ${item.title}`}
onClick={() => {
**//When clicked, display the image on the MUI Dialog**
}}
>
<VisibilityIcon />
</IconButton>
}
/>
</ImageListItem>
<Dialog onClose={handleClose} open={open}> **//How should i handle the opening and closing of each Dialog for each Image ?**
<img src={`${item.img}`} alt={item.title}
loading="lazy" />
</Dialog>
</>
))}
</ImageList>
</Box>
);
}
这个想法是在单击
IconButton
时在屏幕前面显示图像。但由于我有多个图像,我正在努力处理 onClose
组件的 open
和 Dialog
道具。
您可以添加
selectedItem
状态,即 null
来隐藏对话框,或特定的 item
来显示 that 项目的对话框。 handleClose
会将 selectedItem
重置回 null
。
示例:
export default function MasonryImageList({ data }) {
const [selectedImg, setSelectedImg] = React.useState(null);
const handleClose = () => setSelectedImg(null);
return (
<Box id='Mansonry'>
<ImageList variant="masonry" cols={3} gap={8}>
{data.map((item) => (
<React.Fragment key={item.img}>
<ImageListItem>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
title={item.title}
actionIcon={
<IconButton
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
aria-label={`Agrandir ${item.title}`}
onClick={() => {
setSelectedImg(item.img);
}}
>
<VisibilityIcon />
</IconButton>
}
/>
</ImageListItem>
<Dialog
onClose={handleClose}
open={item.img === selectedImg}
>
<img
src={item.img}
alt={item.title}
loading="lazy"
/>
</Dialog>
</React.Fragment>
))}
</ImageList>
</Box>
);
}
您还可以稍微重构代码以仅渲染单个
Dialog
。
示例:
export default function MasonryImageList({ data }) {
const [selectedItem, setSelectedItem] = React.useState(null);
const handleClose = () => setSelectedItem(null);
return (
<Box id='Mansonry'>
<ImageList variant="masonry" cols={3} gap={8}>
{data.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
title={item.title}
actionIcon={
<IconButton
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
aria-label={`Agrandir ${item.title}`}
onClick={() => {
setSelectedItem(item);
}}
>
<VisibilityIcon />
</IconButton>
}
/>
</ImageListItem>
))}
</ImageList>
<Dialog
onClose={handleClose}
open={!!selectedItem}
>
<img
src={selectedItem.img}
alt={selectedItem.title}
loading="lazy"
/>
</Dialog>
</Box>
);
}