我正在尝试将值列表传递给按钮。单击按钮时,应出现具有特定映射值的模式,但在我的情况下仅显示最后一个值(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 https://codesandbox.io/s/rwnyq7zxpq
您正在创建三种不同的模式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>
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)