Как передать ссылку из onClick, чтобы открыть модал - PullRequest
Новая
       30

Как передать ссылку из onClick, чтобы открыть модал

0 голосов
/ 05 июня 2019

В моем приложении есть карты, которые отображают модальное изображение при нажатии. Я использую Material UI, поэтому они называются Dialogs. У меня есть объект (идентификатор, имя, описание), содержащий все данные для каждой карты. Пока у меня есть настроенный цикл, который отображает каждую карту с соответствующим заголовком и изображением, основываясь на моих данных 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>  )

Любая помощь очень ценится!

1 Ответ

1 голос
/ 05 июня 2019

Вы можете решить эту проблему, сделав еще один хук для сохранения выбранного значения.

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

Тогда, когда вы вызываете onClick = handleClickOpen, вы также можете отправить выбранный идентификатор в параметрах.

onClick={handleClickOpen(index)}

Тогда функция handleClickOpen и CourseDialog станут 

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

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

Это, вероятно, решит вашу проблему. Если у вас возникнут какие-либо проблемы, я могу разобраться с этим и привести пример кода.

...