Передача сопоставленного идентификатора кнопки компоненту
У меня есть реагирующее отображение, которое отображает массив объектов в их собственные <cards />. У каждой карты есть своя кнопка, которая открывает <dialog />. Я пытаюсь передать уникальный идентификатор каждого объекта соответствующему диалоговому компоненту. На данный момент я передаю все идентификаторы в <dialog /> независимо от того, какой диалог открыт.
Каждый диалог на основе идентификатора будет вызывать уникальные данные, в настоящее время я получаю все, что мне не нужно.
{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
}
Моя ручка стандартная:
handleDialog = () => {
this.setState({ open: !this.state.open });
};
Я рассмотрел решения, в которых вы передаете идентификатор с помощью onClick, но не знаете, как передать его компоненту. Может быть, есть лучший способ?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
На самом деле здесь происходит то, что вы рендерите несколько VehicleDialog в цикле. Что вам нужно сделать, так это убрать VehicleDialog из цикла (я имею в виду, из map). И визуализируйте его после сопоставления. Теперь, когда нажата кнопка, обратите внимание (в своем state), какой model.id хочет открыть VehicleDialog.
Итак, давайте сначала изменим ваш обработчик, чтобы он принимал модель id в качестве аргумента. Он возвращает функцию, которая устанавливает state.open и state.modelId. Поэтому всякий раз, когда ваш диалог открыт, он знает, какой идентификатор модели хотел его открыть (из state.modelId).
handleDialog = (id) => () => {
this.setState({
open: !this.state.open,
modelId: id
});
};
Теперь давайте вырежем диалог из цикла и изменим onClick свойства кнопок, чтобы отразить новое изменение дизайна обработчика. После цикла визуализируйте один диалог:
{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}
/>