reactjs - 如何在 react 中使用映射数组动态创建用于调用特定操作的按钮

Question

我尝试在 react 中映射一个数组，并尝试生成一个执行特定操作的按钮，即引用另一个 object使用 map() 由同一数组生成函数。我正在使用 Material-ui 来加快我的开发过程。

我对 React 很陌生(实际上这是我第一个使用 React 的项目)，所以也许这只是在 React 中实现“状态”的简单问题，但我对使用 this 有点困惑和bind语法正确。

P.S -请原谅我的愚蠢:>

关注此link重现代码

这是我遇到问题的代码:

const products = [
  {
    id: 1,
    img: "https://image.flaticon.com/icons/png/512/676/676434.png",
    title: "Pineaple",
    price: "Rp. 14.000",
    desc: "Pineaple is one of nutritious food"
  },
  {
    id: 2,
    img: "https://image.flaticon.com/icons/png/512/676/676433.png",
    title: "Banana",
    price: "Rp. 14.000",
    desc: "Banana is one of nutritious food"
  },
  {
    id: 3,
    img: "https://image.flaticon.com/icons/png/512/676/676441.png",
    title: "Dragonfruit",
    price: "Rp. 14.000",
    desc: "Dragonfruit is one of nutritious food"
  },
];


export default function Posts(props) {

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

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }
  return (
    <div>
      <Grid container spacing={1} justify="center">

        {products.map(product => (
          <Grid item xs={6} sm={3} md={2} key={product.id}>
            <Card>
              <CardActionArea>
                <CardMedia
                  component="img"
                  width="auto"
                  height="auto"
                  image={product.img}
                />
                <CardContent>
                  <Typography component="h2"> {product.title} </Typography>
                  <Typography variant="body2" color="primary" component="p">
                    {" "}{product.price}{" "}
                  </Typography>
                </CardContent>
              </CardActionArea>
              <CardActions>
                <Button onClick={handleClickOpen}>
                  Buy
                </Button>
              </CardActions>
            </Card>
          </Grid>
        ))}
      </Grid>

      {products.map(product => (
        <Dialog
          key={product.id}
          fullScreen
          open={open}
          onClose={handleClose}
        >
          <AppBar position="sticky">
            <Toolbar>
              <IconButton onClick={handleClose}>
                <CloseIcon />
              </IconButton>
              <Typography> {product.title} </Typography>
              <Button onClick={handleClose}> buy </Button>
            </Toolbar>
          </AppBar>
          <List className={classes.dialogue}>
            <img src={product.img} alt={product.title} />
            <ListItem button>
              <ListItemText primary={product.title} secondary={product.desc}/>
            </ListItem>
          </List>
        </Dialog>
      ))}

    </div>
  );
}

我想做onclick由映射数组生成的按钮来引用特定操作(在数组列表中显示特定对话框)。我也想对 onSubmit 实现相同的方法在对话框中的“购买”按钮上。

截图:/image/l0Lps.jpg (我点击“pineaple”上的“购买”，但 react 渲染所有列表并显示列表中的最新对象“dragonfruit”。)

我想我会使用redux但也许不是现在。

无论如何，就是这样，我真的很感谢任何回复和帮助:) 谢谢!

Answer 1

有多种方法可以解决这个问题，但我将向您展示一种。您正在使用 React Hooks，并且有一个用于设置打开/关闭状态的钩子(Hook)。在我的解决方案中，我做了一些修改，添加了另一个钩子(Hook)来设置所选产品，然后检查打开和产品是否都已设置。

export default function Posts(props) {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [product, setProduct] = React.useState(null);

  function handleClickOpen(event, item) {
    event.persist();
    setProduct(item);
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }
  return (
    <div style={{ margin: 0, padding: 0 }}>
      <Grid container spacing={1} justify="center">
        {products.map(product => (
          <Grid item xs={6} sm={3} md={2} key={product.id}>
            <Card elevation={0}>
              <CardActionArea>
                <CardMedia
                  component="img"
                  width="auto"
                  height="auto"
                  image={product.img}
                />
                <CardContent>
                  <Typography component="h2"> {product.title} </Typography>
                  <Typography variant="body2" color="primary" component="p">
                    {' '}
                    {product.price}{' '}
                  </Typography>
                </CardContent>
              </CardActionArea>
              <CardActions>
                <Button
                  variant={'outlined'}
                  size="small"
                  color="primary"
                  onClick={event => handleClickOpen(event, product)}
                >
                  Buy
                </Button>
              </CardActions>
            </Card>
          </Grid>
        ))}
      </Grid>
      {open && product && (
        <Dialog
          key={product.id}
          className={classes.dialogue}
          fullScreen
          open={open}
          onClose={handleClose}
          BackdropProps={{ classes: { root: classes.root } }}
          PaperProps={{ classes: { root: classes.paper } }}
        >
          <AppBar position="sticky">
            <Toolbar>
              <IconButton
                edge="start"
                color="inherit"
                onClick={handleClose}
                aria-label="Close"
              >
                <CloseIcon />
              </IconButton>
              <Typography variant="h6" className={classes.title}>
                {product.title}
              </Typography>
              <Button color="inherit" onClick={handleClose}>
                buy
              </Button>
            </Toolbar>
          </AppBar>
          <List className={classes.dialogue}>
            <Image
              className={classes.images}
              src={product.img}
              alt={product.title}
            />
            <ListItem button>
              <ListItemText primary={product.title} secondary={product.desc} />
            </ListItem>
          </List>
        </Dialog>
      )}
    </div>
  );
}

在您的代码中，您没有办法跟踪当前选定的产品，因此您总是获得循环中的最后一项。通过对所选产品使用另一个 Hook ，我可以跟踪所选产品。我希望这对您有所帮助，并祝您掌握 React 好运。