在映射函数内为特定元素呈现对话窗口

Question

我正在通过数组映射，单击一个元素时，我希望将元素的详细信息传递到对话框窗口进行显示。目前，由于map功能，我总是得到最后一个元素(最后一个要映射的元素)

我试图将onClick功能移出地图，但是如果是这样，我没有得到航点和索引等信息。

...
handleUpdateWaypointDialogOpen() {
this.setState({
updateWaypointDialogOpen: true,
})
}
handleUpdateWaypointDialogClose() {
this.setState({
updateWaypointDialogOpen: false,
})
}                     
render() {
return (
array.map((waypoint, i) => {
return (
<div key={i}>
{
<UpdateWaypointDialog
open={updateWaypointDialogOpen}
onClose={this.handleUpdateWaypointDialogClose}
updateWaypoint={this.updateWaypoint}
index={i}
waypoint={waypoint} />
}
<Card
<CardContent>
<Grid container spacing={16}>
<Grid item xs={12}>
<div onClick={this.handleUpdateWaypointDialogOpen}>
{waypoint.address}
</div>
</Grid>
</Grid>
</CardContent >
</Card >
</div >
)
})
)}

我希望只将该特定航点的信息传递给UpdateWaypointDialog，而不是完整的数组。

Answer 1

不确定我是否正确理解了你，

但是您始终可以从onClose或onClick传递其他数据

handleUpdateWaypointDialogOpen(event, waypoint) {
this.setState({
updateWaypointDialogOpen: true,
})
}
handleUpdateWaypointDialogClose(waypoint) {
this.setState({
updateWaypointDialogOpen: false,
})
}                     

<UpdateWaypointDialog
open={updateWaypointDialogOpen}
onClose={()=> this.handleUpdateWaypointDialogClose(waypoint)}
updateWaypoint={this.updateWaypoint}
index={i}
waypoint={waypoint} />

<div onClick={(e)=>this.handleUpdateWaypointDialogOpen(e, waypoint)}>
{waypoint.address}
</div>

Answer 2

array.map 到另一个新组件，然后将updateWaypointDialogOpen移动到该新组件的状态，同时<div key={i}><UpdateWaypointDialog ...>移动到新组件的渲染方法中。这样，每个组件都有自己的状态，与另一个组件隔离。