材料用户界面 - 单击按钮时，模式打开多次

Question

我有这个渲染((：

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是一个数组，它生成表的行，当我单击按钮打开模态时，它会打开多个模态，而不是行中唯一的一个特定的模态。

如何防止这种情况发生？我希望当我单击按钮打开模态时，它只显示特定的模态。

Answer 1

这是因为您正在打开所有具有相同状态"setOpen"的模态。每行需要有不同的状态名称。每一行都有一个唯一的状态名称，如下所示 -

open={this.state['some-unique-name']}
example - `setOpen-${row.id}`

在点击功能中 -

onClick={() => this.handleOpen(row.id)}
handleOpen = (rowId) => {
     this.setState({
       [`setOpen-${rowId}`]: true
     })