Question

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

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

Answer 1

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

open={this.state['some-unique-name']}

example - `setOpen-${row.id}`

和onClick功能-

onClick={() => this.handleOpen(row.id)}

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

Material-ui-单击按钮时，模式打开多次

1 个答案: