В вашем случае вам нужно иметь дело с обратными вызовами.Обратный вызов - это концепция реагирования.
Объявите функцию обработчика событий в orders.js, которая устанавливает значение orderId в состояние при нажатии кнопки в компоненте orders.js и передает эту функцию обработчика события компоненту Order в качестве подпорок и передает orderId в качестве подпорки дляКомпонент OrderViewer
orders.js
constructor(props){
super(props);
this.state = {
orderId: null
}
}
handleViewOrder = orderId = {
this.setState({
orderId
});
}
render(){
return(<div>
<div><Order
orderno='abc'
title='abc'
status='abc'
entity='abc'
po='abc'
duedate='abc' handleViewOrder={this.handleViewOrder} /></div>
</div>
<div><OrderViewer orderId={this.state.orderId} /></div>)}
Теперь в order.js получите доступ к функции получателя, используя реквизиты, и назначьте ее кнопке onClick, передавая orderId
<div>
<button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>
<p><span>{this.props.orderno}</span>
<span>{this.props.title}</span></p>
<p>{this.props.entity} - {this.props.po}</p>
<p>Due {this.props.duedate}</p>
</div>
Теперь вы можете получить доступ к orderId с помощью this.props.orderId в компоненте OrderViewer и отобразить его
OrderViewer.js
<div>{this.props.orderId}</div>
Таким образом, имея функцию-обработчик события в родительском компоненте и передавая его как реквизитыдочернему компоненту и присваиванию дочернему компоненту кнопки onClick, а при щелчке изменение родительского состояния вызывает так называемые обратные вызовы в реакцииЕсли вы понимаете, что я пытаюсь объяснить в моем ответе, вы можете легко приступить к работе
Редактировать:
В компоненте Order.js
Изменить
<button onClick={() => this.handleViewOrder(this.props.orderno)}>View Order</button>
To
<button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>
Вы также вызываете компонент Order в цикле, но не устанавливаете уникальный ключ для компонента Order, поэтому
Изменить
{ Orders.map((order) => <Order
orderno={order.orderno}
title={order.title}
status={order.status}
entity={order.entity}
po={order.po}
duedate={order.duedate}
handleViewOrder={this.handleViewOrder}/> )}
На
{ Orders.map((order) => <Order
orderno={order.orderno}
title={order.title}
status={order.status}
entity={order.entity}
po={order.po}
key={order.orderno}
duedate={order.duedate}
handleViewOrder={this.handleViewOrder}/> )}