单击按钮将道具传递给另一个组件

Question

在我的 nextJS 应用程序中，我想将一个组件的 props 传递给另一个既不是第一个组件的父组件也不是子组件的组件 component.How 我可以这样做吗？

Orders 页面中的 div 和另一个 div.What 页面中的 OrderViewer 中有一个 Order 组件我想要的是，当我单击 'View Order' 按钮，该订单的 orderno 应该传递给 OrderViewer 组件。

orders.js

<div>
   <div><Order 
     orderno='abc'
 title='abc'
 status='abc'
 entity='abc'
 po='abc'
 duedate='abc' /></div>
</div>
<div><OrderViewer /></div>

Order.js

<div>
<button>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.js

<div>//should display the orderno of clicked `order`</div>

一旦 orderno 通过，Orderviewer 显示 it.I 在这里看到了很多这样的 'passing props' 问题，但是 none 他们有这样的 situation.Any 非常感谢小费..

Answer 1

所以，推理是：

你有一些 parent component/screen。让我们称之为 OrdersPage
在 OrdersPage 中你有 2 个组成部分：Order 和 OrdersViewer
在 parent 组件 (OrdersPage) 的上下文中，您感兴趣的是了解点击了哪个订单并在其他 child
显然，您的 OrdersPage 组件需要 state
当您点击某个订单时，您会将其置于状态
您的其他组件将收到 state 作为 props 并显示点击的组件

Answer 2

在您的情况下，您需要处理回调。回调是react中的一个概念。

在 orders.js 中声明一个事件处理函数，它将 orderId 设置为在 orders.js 组件中单击按钮时的状态，并将该事件处理函数作为 props 传递给 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 使用 props 访问接收到的处理函数，并通过传递 orderId

将其分配给按钮 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 并显示它

OrderViewer.js

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

所以在父组件中有一个事件处理函数，并作为道具向下传递给子组件并分配给子组件按钮 onClick，当单击时更改父状态在反应中称为回调。如果您理解我在回答中试图解释的内容，您就可以轻松开始

编辑：

在 Order.js 组件中

改变

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

到

   <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}/> )}

单击按钮将道具传递给另一个组件

Pass props to another component onclick of a button

reactjs

react-props