如何在 React 中渲染多个模态？

发布于 2025-01-17 21:10:14 字数 1189 浏览 1 评论 0原文

我需要渲染多种模态，但模态的数量未固定，并且取决于属性audios进入的对象。我当前使用MUI模式，

这是使用的变量：

  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

这就是方式。我试图渲染模式。当前，单击“视图”后打开的模态仅显示audios的最后一个值，无论我单击哪个“视图”按钮，

  {audios.map((a) => (
          <Grid item container justifyContent="flex-end">
            <Button
              onClick={handleOpen}
              sx={{
                color: 'blue',
                marginTop: '0.6rem',
              }}
            >
              View
            </Button>
            <Modal
              open={open}
              onClose={handleClose}
            >       
              <Box
                sx={{
                  position: 'absolute' as 'absolute',
                  top: '50%',
                  left: '50%',
                  p: 4,
                }}
              >
            <Typography color='white'>{a.name}</Typography>
              </Box>
            </Modal>
          </Grid>
        ))}

是否可以在每个模态上具有单独的状态？

原文

I need to render multiple modals but the number of modals are not fixed and depend on property audios of the object coming in. I'm currently using the mui modal

This is the variables used:

  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

And this is how I attempt to render the modals. Currently, the modal that opens after clicking 'view' only shows the last value in audios no matter which 'View' button I click on

  {audios.map((a) => (
          <Grid item container justifyContent="flex-end">
            <Button
              onClick={handleOpen}
              sx={{
                color: 'blue',
                marginTop: '0.6rem',
              }}
            >
              View
            </Button>
            <Modal
              open={open}
              onClose={handleClose}
            >       
              <Box
                sx={{
                  position: 'absolute' as 'absolute',
                  top: '50%',
                  left: '50%',
                  p: 4,
                }}
              >
            <Typography color='white'>{a.name}</Typography>
              </Box>
            </Modal>
          </Grid>
        ))}

Is there way to have separate state for open and close for each modal?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏辞 2025-01-24 21:10:14

       const MyModalandButton=()=>{
      const [open, setOpen] = useState(false);
      const handleOpen = () => setOpen(true);
      const handleClose = () => setOpen(false);
    return <>
             <Button
              onClick={handleOpen}
              sx={{
                color: 'blue',
                marginTop: '0.6rem',
              }}
            >
              View
            </Button>
             <Modal
              open={open}
              onClose={handleClose}
            >  </>  
    }

也许就像这样

       const MyModalandButton=()=>{
      const [open, setOpen] = useState(false);
      const handleOpen = () => setOpen(true);
      const handleClose = () => setOpen(false);
    return <>
             <Button
              onClick={handleOpen}
              sx={{
                color: 'blue',
                marginTop: '0.6rem',
              }}
            >
              View
            </Button>
             <Modal
              open={open}
              onClose={handleClose}
            >  </>  
    }

maybe just like this

回复收藏 0 原文