我正在尝试将值列表传递给按钮。单击按钮时,应出现具有特定映射值的模态,但在我的情况下,只有数组中的最后一个值 (3) 出现在所有模态中...... 我该如何解决?
state = {
open: false,
stationData : [
{ id:1, number:'1' },
{ id:2, number:'2' },
{ id:3, number:'3' }
],
};
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
render() {
const {stationData} = this.state;
{stationData.map((station,index) => (
<div key={index}>
<Button variant="contained" color="primary" style={styles.button} onClick={this.handleOpen}>
{station.number}
</Button>
<Modal
open={this.state.open}
onClose={this.handleClose}
aria-labelledby={index}
aria-describedby={index}
>
<div style={styles.modal}>
{station.number}
</div>
</Modal>
</div>
))}
}
查看此代码 sandbox
最佳答案
您在 stationData.map()
函数中创建了三个不同的模式,每个模式都依赖于一个状态 this.state.open
。因此,只要按下一个按钮,所有三个按钮都会打开,您会看到最后一个按钮在最上面。所以 3 总是可见的。
您应该做的是 - 只创建一个模式并跟踪在新状态 this.state.stationNumber
中按下了哪个按钮。这样,唯一的模态将触发,并且它将知道从状态中呈现什么。
这是你修改后的代码,我在必要的地方添加了注释:
class Dashboard extends React.Component {
state = {
open: false,
stationNumber: null,
stationData: [
{ id: 1, number: "1" },
{ id: 2, number: "2" },
{ id: 3, number: "3" }
]
};
handleOpen = stationNumber => () => {
// get which button was pressed via `stationNumber`
// open the modal and set the `stationNumber` state to that argument
this.setState({ open: true, stationNumber: stationNumber });
};
handleClose = () => {
this.setState({ open: false });
};
render() {
const { stationData } = this.state;
return (
<div style={styles.wrapper}>
<div style={styles.body}>
<Paper square elevation={0} style={styles.container}>
{stationData.map((station, index) => (
<div key={index}>
<Button
variant="contained"
color="primary"
style={styles.button}
// pass which button was clicked as an argument
onClick={this.handleOpen(station.number)}
>
{station.number}
</Button>
</div>
))}
</Paper>
{/* add only one modal */}
<Modal open={this.state.open} onClose={this.handleClose}>
{/* display the content based on newly set state */}
<div style={styles.modal}>{this.state.stationNumber}</div>
</Modal>
</div>
</div>
);
}
}
https://stackoverflow.com/questions/54703943/