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状态。只需在open组件中维护Dialog的close，isOpen处理程序和ProductCard状态即可。

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">

在React的对话框中显示道具数据

1 个答案: