社区首页 >问答首页 >如何在MUI对话框中显示“正确”卡数据

问如何在MUI对话框中显示“正确”卡数据
EN

Stack Overflow用户

提问于 2022-05-31 00:51:52

回答 1查看 67关注 0票数 0

我试图实现一个选项，打开一个对话框为相应的卡，使用MUI卡，CardAction和对话框。

目前，我正在从Firebase获取所有数据，并在一个单独的卡片中显示每个数据，并有一个按钮在对话框中查看它。从现在开始，这个按钮将只打开一个对话框，并显示最后获取的数据，无论我选择哪一张卡。

如何在对话框中显示正确的卡片数据，取决于我单击按钮的卡片？

我在第四张卡上按下“查看更多”，对话框只会从第四张卡加载数据。

useEffect(() => {
    const getEvents = async () => {
      const data = await getDocs(eventsRef);

      data.forEach((doc) => {
        setEventList(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
      })
    };
    getEvents();
  }, [])

  return (
    <>
      <div className="stepper-title" style={{textAlign: "center"}}>
          <b><h1>Aankomende afspraken</h1></b><br></br><p>Prik een afspraak die jou intereseerd</p>
      </div>
      <div className="event-list-container">
        {
          eventList && eventList.map(event => {
            {count++}
            return (
              <div key={event.id}>
                <Card variant="outlined" sx={{ width: 250 }}>
                  <CardContent>
                      <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
                        {event.date}
                      </Typography>
                      <Typography variant="h5" component="div">
                        {event.occasion.title}
                      </Typography>
                      <Typography sx={{ mb: 1.5 }} color="text.secondary">
                        {event.location}
                      </Typography>
                      <Typography variant="body2">
                        {event.occasion.description}
                      </Typography>
                  </CardContent>
                  <CardActions>
                    card {count}
                    <Button onClick={handleClickOpen} size="small" eventid={event.id}>bekijken</Button>
                    <Dialog open={open} onClose={handleClose} PaperProps={{elevation: 1}} hideBackdrop>
                      {count}
                      <DialogContent>
                        <TextField
                          label="Titel"
                          defaultValue={event.occasion.title}
                          fullWidth
                          variant="standard"
                        />
                        <TextField
                          label="Description"
                          defaultValue={event.occasion.description}
                          fullWidth
                          variant="standard"
                        />
                        <TextField
                          label="Datum"
                          defaultValue={event.date}
                          fullWidth
                          variant="standard"
                        />
                        <TextField
                          label="Locatie"
                          defaultValue={event.location}
                          fullWidth
                          variant="standard"
                        />
                        <TextField
                          label="Naam"
                          defaultValue={event.organizer.name}
                          fullWidth
                          variant="standard"
                        />
                        <TextField
                          label="E-mailadres"
                          defaultValue={event.organizer.email}
                          fullWidth
                          variant="standard"
                        />
                      </DialogContent>
                      <DialogActions>
                        <Button onClick={handleClose}>terug</Button>
                        <Button onClick={handleClose}>Aanpassen</Button>
                      </DialogActions>
                    </Dialog>
                  </CardActions>
                </Card>
              </div>
              )
          })
        }
      </div>
    </>
  );
}