javascript - 如何将数据从卡片列表中的一张卡片传递到对话框？

Question

我想使用 Material-UI 对话框为我的 CRUD 应用程序添加确认步骤，但我似乎无法将任何数据传递到我的对话框。

我有一个使用 .map() 创建的卡片列表/网格，每个卡片都包含我从 MongoDB 文档中提取的数据。我可以通过一个按钮从我的应用程序中删除文档/卡片，但现在我想使用 Material-UI 对话框向删除过程添加一个确认步骤。为此，我需要将数据从卡片传递到对话框(如果这是我想要做的事情的正确措辞)。我不知道该怎么做。

我试过使用 this.props.match.params.id、this.id、this._id、this.oneSavedArticle.id 和 this.props.oneSavedArticle.id 传递数据，但它们都已返回错误或未定义。

这是我的删除函数:

  handleDelete = id => {
    console.log(id);
    API.deleteArticle(this)
      .then(res => console.log(res.data))
      .catch(err => console.log(err));

    // this.props.history.push("/saved");
  };

这是我的对话:

      <div>
        <Button
          color="secondary"
          variant="outlined"
          onClick={this.handleClickOpen}
        >
          DELETE
        </Button>
        <Dialog
          open={this.state.open}
          TransitionComponent={Transition}
          keepMounted
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        >
          <DialogTitle>
            {"Delete this article?"}
          </DialogTitle>
          <Divider variant="middle" />
          <DialogActions>
            <Button onClick={this.handleClose} color="secondary">
              NO
            </Button>
            <Button
              onClick={() => this.handleDelete(this.props)}
              color="primary"
            >
              YES
            </Button>
          </DialogActions>
        </Dialog>
      </div>

这是我的 API 路由:

  deleteArticle: function(id) {
    return axios.delete("/api/articles/" + id);
  }

这是我在卡片列表中实现对话框的位置和方式:

        {this.state.savedArticles.length ? (
          <Grid>
            {this.state.savedArticles.map((oneSavedArticle, i) => (
              <Card style={savedArticleCard} key={i}>
                <Typography variant="h5">{oneSavedArticle.headline}</Typography>
                <Divider variant="middle" />
                <Typography>{oneSavedArticle.snippet}</Typography>
                <a href={oneSavedArticle.web_url} style={linkStyles}>
                  <Button style={buttonStyles}>READ IT</Button>
                </a>

                <DeleteDialogue {...this.props} />
              </Card>
            ))}
          </Grid>

如您所料，我只是希望能够将数据从卡片传递到对话框，这样我的删除功能才能正常运行。

如果我遗漏了任何信息，或者没有提供足够的代码，或者没有足够清楚地解释某些内容，请告诉我。

提前致谢!

Answer 1

如果我理解正确，DeleteDialogue 就是您所说的对话框组件。如果是这样，请尝试将特定 Prop 传递给对话框并在对话框中使用它。类似的东西:

{this.state.savedArticles.length ? (
          <Grid>
            {this.state.savedArticles.map((oneSavedArticle, i) => (
              <Card style={savedArticleCard} key={i}>
                <Typography variant="h5">{oneSavedArticle.headline}</Typography>
                <Divider variant="middle" />
                <Typography>{oneSavedArticle.snippet}</Typography>
                <a href={oneSavedArticle.web_url} style={linkStyles}>
                  <Button style={buttonStyles}>READ IT</Button>
                </a>
                <DeleteDialogue id={oneSavedArticle.id} />
              </Card>
            ))}
          </Grid>

在对话框中:

<div>
        <Button
          color="secondary"
          variant="outlined"
          onClick={this.handleClickOpen}
        >
          DELETE
        </Button>
        <Dialog
          open={this.state.open}
          TransitionComponent={Transition}
          keepMounted
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        >
          <DialogTitle>
            {"Delete this article?"}
          </DialogTitle>
          <Divider variant="middle" />
          <DialogActions>
            <Button onClick={this.handleClose} color="secondary">
              NO
            </Button>
            <Button
              onClick={() => this.handleDelete(this.props.id)}
              color="primary"
            >
              YES
            </Button>
          </DialogActions>
        </Dialog>
      </div>

我认为它应该以这种方式工作..