在 React 的对话框中显示 Props 数据

Question

我是 React JS 的新手，我正在开发一些基于电子商务的示例应用程序作为我的实时应用程序，所以我遇到了一个问题。

在产品列表中有购买按钮，如果我点击该按钮，应该会弹出一个对话框，其中包含相应的产品详细信息

我写了两个组件，一个是 ProductCard 和 DialogImage 组件

我在 ProductCard 中显示产品列表，这里是代码

import React, { useState, useEffect } from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { Container } from "@material-ui/core";
import DialogImage from "../pages/DialogImage";



export default function ProductCard(props) {
 const classes = useStyles();
 const [products, setProducts] = useState([]);

const fetchProducts = () => {
axios.get("http://images.stockal.com/api/products.json").then(response => {
  console.log(response.data);
  setProducts(response.data.data.products);
});
};

useEffect(() => {
 fetchProducts();
}, []);

const [openModal, setModal] = useState(false);
const [image, setImage] = useState('');
const [size, setSize] = useState('');

function selectedproduct(searchImage, sizes) {
  setModal(true);
  setImage(searchImage);
  setSize(sizes);
}

return (
<div className={classes.root}>
  <Container>

    <DialogImage modal={openModal} productImage={image} productSize={size}  />
    <Grid container spacing={6}>
      {products.map((event, index) => {
        return (
          <Grid item xs={12} sm={12} md={6} lg={4} xl={4} key={index}>
            <Paper className={classes.paper}>
              <Grid container spacing={2}>
                <Grid item xs={5}>
                  <img
                    src={event.searchImage}
                    alt={event.product}
                    width="100%"
                  />
                </Grid>
                <Grid item xs={7}>
                  <Box fontWeight="fontWeightBold" m={1}>
                    {event.productName}
                  </Box>
                  <Box m={1}> Price: Rs. {event.price} \- </Box>
                  <Box m={1}> Brand: {event.brand} </Box>
                  <Box m={1}> Sizes: {event.sizes} </Box>
                </Grid>
              </Grid>
              <Button
                variant="contained"
                fullWidth
                color="primary"
                onClick={selectedproduct.bind(
                  this,
                  event.searchImage,
                  event.sizes
                )}
              >
                Buy
              </Button>
            </Paper>
          </Grid>
        );
      })}
    </Grid>
  </Container>
</div>
);}

和 DialogImage 组件

export default function DialogImage(props) {
console.log(props);
const [open, setOpen] = useState(false);
const [image, setImage] = useState("");
const [size, setSize] = useState("");

const handleClickOpen = () => {
setOpen(true);
setImage(props.productImage);
setSize(props.productSize);
};

const handleClose = () => {
setOpen(false);
setImage("");
setSize("");
};

return (
<div>
  <Dialog
    open={open}
    onClose={handleClose}
    aria-labelledby="draggable-dialog-title"
  >
    <DialogTitle style={{ cursor: "move" }} id="draggable-dialog-title">
      Product Name:
    </DialogTitle>
    <DialogContent>
      <DialogContentText>
        <img src={image} alt="Product Name" width="100%" />
        <Box>Product Size: {size}</Box>
      </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Cancel
      </Button>
      <Button onClick={handleClose} color="primary">
        Subscribe
      </Button>
    </DialogActions>
  </Dialog>
</div>
);}

这是我执行代码时的图像， 我正在将数据作为道具发送到 DialogImage 组件，您可以在发布的图像上方看到控制台，但我不知道如何从 ProductCard 组件触发或打开模态弹出窗口 请你帮我解决这个问题

作为 React 的新手

Answer 1

您不需要在对话框内部和外部都有打开、关闭逻辑和isDialogOpen 状态。只需在 ProductCard 组件中维护 Dialog 的 open、close 处理程序和 isOpen 状态即可。

const handleDialogOpen = () => {
   setOpen(true);
   setImage(props.productImage);
   setSize(props.productSize);
 };

const handleDialogClose = () => {
   setOpen(false)
   setImage(null)
   setSize(null)
};

...
<DialogImage open={openModal} onClose={handleDialogClose} productImage={image} productSize={size}  />

然后在你的<DialogImage/> 组件中，

export default function DialogImage(props) {
   //you don't need state in here
    return <Dialog
             open={props.open}
             onClose={props.onClose}
             aria-labelledby="draggable-dialog-title">