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是您正在谈论的对话框组件。如果是这样，请尝试将特定的道具传递给对话框，然后在对话框中使用它。像这样：

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

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

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

1 个答案: