单击按钮将道具传递给其他组件

在你的情况下,你需要处理回拨。回调是react中的一个概念。

在orders.js中声明一个事件处理程序函数,该函数将orderID设置为在orders.js组件中单击按钮时的状态,并将该事件处理程序函数传递给order component作为props,将orderID作为prop传递给orderviewer组件。

Jords. 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中,使用props访问接收的处理程序函数,并通过传递orderid将其分配给button onclick。

   <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>

现在,您可以使用orderviewer组件中的this.props.orderid访问orderid并显示它。

OrthVIEW

   <div>{this.props.orderId}</div>

因此,在父组件中拥有一个事件处理程序函数,并将其作为属性传递给子组件,并将其分配给子组件按钮onclick,单击时更改父状态,称为react中的回调。如果你理解我在回答中试图解释的话,你就可以轻松地走了。

编辑:

in order.js组件

变化

  <button onClick={() => this.handleViewOrder(this.props.orderno)}>View Order</button>

到

   <button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>

另外,您在循环中调用order组件,但没有将unique key设置为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}/> )}

所以,推理是:

1. 您有一些父组件/屏幕。让我们称之为 OrdersPage
2. 在内部 订货单 您有两个组件: Order 和 OrdersViewer
3. 在父组件上下文中,您感兴趣的内容( 订货单 )是要知道单击了哪个顺序,并在其他子项中显示
4. 显然,你需要 state 对你 订货单 成分
5. 单击某个订单时,将使其处于状态
6. 您的其他组件将收到 状态 作为 props 并显示单击的组件