Question

我的应用程序中有一些卡片，这些卡片在单击时会显示模式。我正在使用Material UI，因此它们被称为“对话框”。我有一个对象（ID，名称，描述），其中包含每张卡的所有数据。到目前为止，我已经建立了一个循环，根据我的JSON数据显示每张卡片以及相应的标题和图片。我试图弄清楚如何从单击的任何卡中将引用传递到模式，并根据所选模式显示描述。

我会忽略我认为不必要的代码

export default ({courses}) => {

const [open, setOpen] = React.useState(false);

const handleClickOpen = () => {
  setOpen(true); 
};

const handleClose = () => {
    setOpen(false);
};

return (
    <Grid container className={mainGrid}>
      {Object.keys(courses).map((index, key) => {
        return (
          <Grid item xs key={key}>
            <Card className={cardStyle}>
              <CardActionArea onClick={handleClickOpen}>
                <CardMedia image={require(`../Assets/${courses[index].name}.png`)} className={media}/>
                <CardContent>
                  <Typography gutterBottom className={cardTitle} variant="h5" component="h2">
                    {courses[index].name}
                  </Typography>
                </CardContent>
              </CardActionArea>  
            </Card>
          </Grid>
        );
      })};

      {/* Modal Element - I need to pass a reference here somehow*/}

      <CourseDialog 
        open={open} 
        onClose={handleClose} 
        classes={classes} 
      />
    </Grid>
  );
};

// This is the Modal function, in the same file as the above code. This is where I want to display the description when the modal is clicked.

const CourseDialog = (props) => {

  const { classes, onClose, ...other } = props;

  function handleClose() {
    onClose();
  };

  return ( <div></div>  )

非常感谢您的帮助！

Answer 1

您可以通过制作另一个用于存储所选值的钩子来解决它。

const [selectedId, setSelectedId] = React.useState(null);

然后，当您调用onClick = handleClickOpen时，您还可以在参数中发送选定的ID。

onClick={handleClickOpen(index)}

然后handleClickOpen函数和CourseDialog将变为

const handleClickOpen = (id) => {
  setSelectedId(id);
  setOpen(true);
};

<CourseDialog 
  open={open} 
  onClose={handleClose} 
  classes={classes}
  data={courses[selectedId]}
/>

这可能会解决您的问题。如果您遇到任何问题，那么我可以摆弄一下，并提供一些类似的示例代码。

如何从onClick传递引用以打开模式

1 个答案: