单击按钮将道具传递给另一个组件 [英] Pass props to another component onclick of a button

问题描述

在我的 nextJS 应用中，我想将一个组件的 props 传递给另一个既不是第一个组件的父组件也不是子组件的组件.我该怎么做?

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

订单.js

<div><顺序订单号='abc'标题='abc'状态='abc'实体='abc'po='abc'Duedate='abc'/></div>
<div><OrderViewer/></div>

订单.js

<button>查看订单</button><p><span>{this.props.orderno}</span><span>{this.props.title}</span></p><p>{this.props.entity} - {this.props.po}</p><p>到期{this.props.duedate}</p>

OrderViewer.js

//应该显示点击`order`的orderno
;

一旦orderno通过，Orderviewer显示它.我在这里看到了很多这种传递道具"的问题，但没有一个有这种情况.任何提示高度赞赏..

解决方案

在您的情况下，您需要处理回调.回调是反应中的一个概念.

在 orders.js 中声明一个事件处理函数，它将 orderId 设置为在 orders.js 组件中单击按钮时的状态，并将该事件处理函数作为道具传递给 Order 组件，并将 orderId 作为道具传递给 OrderViewer 组件

订单.js

 构造函数(道具){超级(道具)；this.state = {订单 ID:空}}handleViewOrder = orderId = {this.setState({订单编号});}使成为(){返回(<div><div><顺序订单号='abc'标题='abc'状态='abc'实体='abc'po='abc'Duedate='abc' handleViewOrder={this.handleViewOrder}/></div>

<div><OrderViewer orderId={this.state.orderId}/></div>)}

现在在 order.js 中使用 props 访问接收到的处理函数，并通过传递 orderId 将其分配给按钮 onClick

 
<button onClick={() =>this.props.handleViewOrder(this.props.orderno)}>查看订单</button><p><span>{this.props.orderno}</span><span>{this.props.title}</span></p><p>{this.props.entity} - {this.props.po}</p><p>到期{this.props.duedate}</p>

现在，您可以在 OrderViewer 组件中使用 this.props.orderId 访问 orderId 并显示它

OrderViewer.js

 
{this.props.orderId}

因此，在父组件中有一个事件处理函数，并将其作为道具传递给子组件并分配给子组件按钮 onClick 和单击时更改父状态，这在反应中称为回调.如果您理解我在回答中要解释的内容，您就可以轻松开始

In Order.js 组件

改变

 this.handleViewOrder(this.props.orderno)}>查看订单

到

 this.props.handleViewOrder(this.props.orderno)}>查看订单</button>

您也在循环中调用 Order 组件，但您没有为 Order 组件设置唯一键

改变

 { Orders.map((order) => )}

到

 { Orders.map((order) => )}

In my nextJS app, I want to pass props of one component to another which is neither a parent nor child of first component.How can I do that?

There is a Order component inside a div in Orders page and OrderViewer in another div.What I want is that when I click the 'View Order' button,orderno of that order should pass to OrderViewer component.

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>

Once orderno passed,Orderviewer displays it.I saw so many this kind of 'passing props' questions here but none of them had this kind of situation.Any tip is highly appreciated..

解决方案

In your case you need to deal with callbacks. Callback is a concept in react.

Declare an event handler function in orders.js which sets the orderId to the state when button clicked in orders.js component and pass down that event handler function to Order component as props and pass down orderId as a prop to OrderViewer component

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

Now in order.js access the received handler function using props and assign it to button onClick by passing 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>

Now, you can access orderId using this.props.orderId in OrderViewer component and display it

OrderViewer.js

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

So having an event handler function in parent component and passing down as props to child component and assigning to child component button onClick and when clicked changing parent state is so called callbacks in react. If you understand what I am trying to explain in my answer you can get going easily

Edit:

In Order.js component

Change

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

To

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

Also you are calling Order component in loop but you are not setting unique key to Order component so

Change

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

To

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

这篇关于单击按钮将道具传递给另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！