代码之家 › 专栏 › 技术社区 › Saghar Francis

如何在React中获取父元素id

typescript reactjs

Saghar Francis · 技术社区 · 3 年前

我正在使用react with typescript。我从后端API获取一些数据,然后使用 map 作用map函数是返回一张卡,其中我有两个按钮,我想根据 key 我在map函数中提供的。

作为两个按钮之一,有一个delete(删除)按钮,用于发送 id 将卡的数据传输到服务器进行删除。

              {items &&
              items.map((data) => {
                if (option[index]) {
                  return <Grid item lg={3} md={4} sm={6} xs={11} key={data.Id}>
                    <Card className="home-card">
                      <CardMedia
                        component="img"
                        height="256px"
                        image={homeimg}
                        alt="green iguana"
                      />
                      <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                          {data.name}
                        </Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" variant="contained">
                          More Details
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
// Here I want to get the key that I provided to the Grid element
                          onClick={handleClickOpen}
                        >
                          Delete
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                }
              })}

获取钥匙的最佳方式是什么?

1 回复 | 直到 3 年前

DanielJ 3 年前

因为map函数有效地返回当前 items 您可以在该函数中随时访问传递给键的值。假设要在中处理键值 handleClickOpen 可以将该值作为方法参数传递。

您可能还希望传递给onClick a函数,否则将运行 把手ClickOpen 渲染组件时,而不是用户单击按钮时。

最后,这只是一种风格选择,但你也可以 destructure the values 项目中的数据

             {items &&
              items.map({Id, name} => {
                if (option[index]) {
                  return <Grid item lg={3} md={4} sm={6} xs={11} key={Id}>
                    <Card className="home-card">
                      <CardMedia
                        component="img"
                        height="256px"
                        image={homeimg}
                        alt="green iguana"
                      />
                      <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                          {name}
                        </Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" variant="contained">
                          More Details
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
                          onClick={() => (handleClickOpen(Id))}
                        >
                          Delete
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                }
              })}