如何在反应中呈现多个模态？

Question

我需要渲染多个模态，但模态的数量不固定，取决于进入对象的属性 audios。我目前正在使用 mui 模态

这是使用的变量：

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

这就是我尝试渲染模式的方式。目前，无论我点击哪个 'View' 按钮

，点击 'view' 后打开的模式只显示 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>
        ))}

有没有办法让每个模态的打开和关闭状态分开？

Answer 1

我认为你应该把 'open' 状态放在 Modal 组件中，这样每个 Modal 都有自己的状态。

Answer 2

       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}
            >  </>  
    }

也许就是这样

如何在反应中呈现多个模态？

How to render multiple modals in react?

javascript

modal-dialog

reactjs

material-ui