[英]How can I pass data from one card, in a list of cards, to a dialog?
I want to add a confirmation step for my CRUD application using a Material-UI dialog, but I don't seem to be able to pass any data to my dialog.我想使用 Material-UI 对话框为我的 CRUD 应用程序添加一个确认步骤,但我似乎无法将任何数据传递给我的对话框。
I have a list/grid of cards that I've created using .map(), each of which contains data I pulled from a MongoDB document.我有一个使用 .map() 创建的卡片列表/网格,每个卡片都包含我从 MongoDB 文档中提取的数据。 I'm able to delete the documents/cards from my app with just a button, but now I'd like to add a confirmation step to the deletion process, using a Material-UI dialog.
我只需一个按钮就可以从我的应用程序中删除文档/卡片,但现在我想使用 Material-UI 对话框在删除过程中添加一个确认步骤。 To do that, I need to pass data from the cards to the dialog (if that's the correct phrasing for what I'm trying to do).
为此,我需要将数据从卡片传递到对话框(如果这是我想要做的正确措辞)。 I can't figure out how to do that.
我不知道该怎么做。
I've tried passing the data using this.props.match.params.id, this.id, this._id, this.oneSavedArticle.id, and this.props.oneSavedArticle.id, but they all have either returned an error or undefined.我尝试使用 this.props.match.params.id、this.id、this._id、this.oneSavedArticle.id 和 this.props.oneSavedArticle.id 传递数据,但它们都返回了错误或不明确的。
Here is my delete function:这是我的删除功能:
handleDelete = id => {
console.log(id);
API.deleteArticle(this)
.then(res => console.log(res.data))
.catch(err => console.log(err));
// this.props.history.push("/saved");
};
Here is my dialog:这是我的对话:
<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>
Here is my API route:这是我的 API 路线:
deleteArticle: function(id) {
return axios.delete("/api/articles/" + id);
}
Here is where and how I've implemented the dialog into my list of cards:这是我在我的卡片列表中实现对话框的位置和方式:
{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>
As you can expect, I'd just like to be able to pass the data from to card to the dialog so I can get my delete function functioning correctly.正如您所料,我只是希望能够将数据从卡传递到对话框,以便我的删除功能正常运行。
If I've left out any info, or haven't provided enough code, or haven't explained something clearly enough, please let me know.如果我遗漏了任何信息,或者没有提供足够的代码,或者解释得不够清楚,请告诉我。
Many thanks ahead of time!非常感谢提前!
If I understand correctly, the DeleteDialogue
is the dialog component that you are talking about.如果我理解正确,
DeleteDialogue
是您正在谈论的对话框组件。 If so, try passing a specific prop to the dialog and use it in the dialog.如果是这样,请尝试将特定道具传递给对话框并在对话框中使用它。 Something like that:
类似的东西:
{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>
And in the dialog:在对话框中:
<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>
I think its suppose to work that way..我认为它应该以这种方式工作..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.