javascript - 将映射的按钮 ID 传递给组件

Question

我有反应映射，将对象数组映射到它们自己的 <cards /> 。每张卡片都有自己的按钮，可打开 <dialog /> 。我试图将每个对象的唯一 ID 传递到相关的对话框组件。目前我正在将所有 ID 发送到 <dialog />无论打开哪个对话框。

每个基于 ID 的对话框都会调用唯一的数据，目前我得到的都是我不想要的。

            {vehicles !== undefined ? vehicles.map(model => (
                <React.Fragment>
                        <Card>
                            <CardActions className={classes.cardActions}>
                                <Button fullWidth color="#333" onClick={this.handleDialog}>
                                    FIND OUT MORE
                            </Button>
                            </CardActions>
                        </Card>

                    <VehicleDialog
                        key={model.id}
                        onClose={this.handleDialog}
                        open={this.state.open}
                        id={model.id} //passes all IDs to this component
                    />
                </React.Fragment>
            ))
                :
                null
            }

我的 handle 是标准的:

handleDialog = () => {
    this.setState({ open: !this.state.open });
};

我研究了通过 onClick 传递 ID 的解决方案，只是不确定如何将该 ID 传递给组件。也许有更好的方法？

Answer 1

实际上这里发生的是，您正在循环中渲染多个 VehicleDialog。你应该做的是 - 将 VehicleDialog 从循环中取出(我的意思是从 map 中取出)。并在映射后渲染它。现在，当单击按钮时，请记下(在您的状态中)哪个model.id想要打开VehicleDialog。

因此，我们首先修改您的处理程序以将模型的 id 作为参数。它返回一个设置 state.open 和 state.modelId 的函数。因此，每当您的对话框打开时，它就知道哪个模型 ID 想要打开它(来自 state.modelId)。

handleDialog = (id) => () => {
    this.setState({ 
        open: !this.state.open,
        modelId: id
    });
};

现在让我们将对话框从循环中删除并修改按钮的 onClick 属性以反射(reflect)新的处理程序设计更改。循环后，渲染单个对话框:

{vehicles !== undefined ? vehicles.map(model => (
    <Card>
        <CardActions className={classes.cardActions}>
            <Button fullWidth color="#333" onClick={this.handleDialog(model.id)}>
                FIND OUT MORE
            </Button>
        </CardActions>
    </Card>
)):null
}

<VehicleDialog
    key={model.id}
    onClose={this.handleDialog}
    open={this.state.open}
    id={this.state.modelId}
/>