[英]Material-ui - when click in a button, modal open multiple times
我有这个render():
render() {
const classes = this.useStyles();
return (
<Paper style={classes.root}>
<Table style={classes.table}>
<TableBody>
{this.state.deadTopics.map(row => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.id}
</TableCell>
<TableCell align="right">
<div>
<Button variant="outlined" color="primary" onClick={this.handleOpen}>
Open alert dialog
</Button>
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.setOpen}
onClose={this.handleClose}
>
<div style={classes.modal} style={classes.paper}>
<p>ola</p>
</div>
</Modal>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
}
看起来不错,可以按预期渲染。 我的问题是: deadTopics元素是一个数组,它生成表的行,当我单击按钮以打开Modal时,它会打开多个模式,而不是该行中唯一的一个模式。
如何防止这种情况发生? 我希望当我单击按钮以打开模式时,它仅显示特定的模式。
这是因为您要打开所有具有相同状态“ setOpen”的模块。 每行需要有不同的状态名称。 每行都有一个唯一的状态名称,如下所示-
open={this.state['some-unique-name']}
example - `setOpen-${row.id}`
并在onClick函数中-
onClick={() => this.handleOpen(row.id)}
handleOpen = (rowId) => {
this.setState({
[`setOpen-${rowId}`]: true
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.