Javascript 单击ImageListItemBar的IconButton后，在Material—UI对话框中显示图像

发布于03月30日

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>
  );
}

这个 idea 是当点击IconButton时在屏幕前面显示图像.但由于我有多个图像，我正在努力与Dialog组件的onClose和openprops .

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> ); }

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> ); }

Javascript 单击ImageListItemBar的IconButton后，在Material—UI对话框中显示图像

推荐答案

Javascript相关问答推荐

在JavaScript中声明自定义内置元素不起作用

jQuery s data()[storage object]在vanilla JavaScript中？'

查找最长的子序列-无法重置数组

优化Google Sheet脚本以将下拉菜单和公式添加到多行

VUE 3捕获错误并呈现另一个组件

Rxjs流中生成IMMER不能在对象上操作

Jest toHaveBeenNthCalledWith返回当前设置的变量值，而不是调用时的值

在画布中调整边上反弹框的大小失败

如何在Java脚本中对列表中的特定元素进行排序？

传递方法VS泛型对象VS事件特定对象

如何使用Astro优化大图像？

P5.js中的分形树

如何修复使用axios运行TSC index.ts时出现的错误？

JWT Cookie安全性

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

对不同目录中的Angular material 表列进行排序

如何在Web项目中同步语音合成和文本 colored颜色更改

Firefox的绝对定位没有达到预期效果

我如何才能让p5.js在不使用实例模式的情况下工作？

MUI-TABLE：MUI表组件中交替行的不同 colored颜色不起作用