如何在 React 中获取父元素 id

萨格·弗朗西斯

我正在使用对打字稿做出反应。我从后端 API 获取一些数据，然后使用该map函数呈现数据。地图功能是返回一张卡片，其中我有两个按钮，我想根据 key我在地图功能上提供的内容执行一些操作。

作为两个按钮之一，有一个删除按钮，它将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>
                }
              })}

获得该密钥的最佳方法是什么？

丹尼尔·J

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

您还可能希望将一个函数传递给 onClick ，否则您将handleClickOpen在组件渲染后立即遇到，而不是在用户单击按钮时遇到。

最后，这只是一种风格选择，但您也可以解构项目中数据的值

             {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>
                }
              })}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。