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传递其他数据

D:/SPY_data/

library(purrr)
walk2(d$href.y, d$CIKAccNumFileDate_web_extension,
      function(x, y) {
        download.file(x, destfile = paste0("D:/SPY_data/", y), quiet = FALSE)
      })

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

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

Answer 2

array.map到另一个新组件，然后将updateWaypointDialogOpen移到新组件的状态，也将<div key={i}><UpdateWaypointDialog ...>移到新组件的render方法。这样，每个组件都有自己的状态，彼此隔离。

渲染地图函数中特定元素的对话框窗口

2 个答案: