Здравствуйте! Вопрос касается связи между компонентами React,а именно: передача данных из одного компонента в другой.
Пусть есть страница <Layout/>
, у которой есть массив объектов items
. Для каждого элемента items
создается компонент <Item />
:
Код Layout.jsx:
class Layout extends Component {
renderItems() {
var items = [
{name: 'Ivan', _id: '1'},
{name: 'Petya', _id: '2'}
];
return items.map( (each) => {
return (
<Item each={each} />
);
});
}
render() {
return (
<main> {this.renderItems} <main>
);
}
}
Код Item.jsx:
class Item extends Component {
render() {
return (
<div>
{this.props.each.name}
</div>
);
}
}
Пусть теперь я хочу реализовать по щелчку на каждый <Item />
вывод в консоль его _id
. Сделать это внутри самого <Item />
не составляет никакого труда:
Новый код Item.jsx:
class Item extends Component {
printId() {
console.log(this.props.each._id);
}
render() {
return (
<div onClick={ this.props.printId.bind(this) }>
{this.props.each.name}
</div>
);
}
}
Но как быть, если нужно реализовать кнопку "Показать _id" снаружи, то есть в <Layout />
?
Допустим, внутри каждого <Item/>
добавим checkbox
. Если этот чекбокс отмечен галочкой как selected
, то при нажатии кнопки 'Показать _id' в консоль выводятся _id
всех отмеченных Item
ов.
Но как передать _id
отмеченных Item
ов в <Layout />
?
Заранее благодарен за ответы.