如何將整張卡傳遞到ReactJS中的onClick按鈕上的另一個組件？

Question

我有兩個組件所有者和訂單。 我有一張卡片，在所有者組件中有一個單擊按鈕“Accept”。 如何在單擊“接受”按鈕時將整張卡傳遞給Order組件。 我希望同一張卡出現在Order組件中。 我正在使用reactJs。

以下是所有者組件的一部分，它有一張卡片

import React, { Component } from 'react'



export default class Owner extends Component{

    constructor(props) {
        super(props);
    } 

    render(){

        let { OrderID,CID,DeliveryEst,DeliveryInstructions,DriverID,Orders,PrepInsruction,RID,Status,Total } = this.props.indOrder;

        return(

            <div class="container">
                <div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
                    <div class="card-body" style={{textAlign:'center'}}>
                        <h4 class="card-title">{CID}</h4>
                        <p class="card-text"><h5>{RID}</h5></p>
                        {/* <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> */}

                        <button type="button" onClick={() => {this.props.removeOrder(OrderID);this.props.showOrder(OrderID)}}class="btn btn-success btn-sm" style={{width:'50%'}}>Accept</button> 


                        <button type="button" class="btn btn-danger btn-sm" style={{width:'50%'}}>Decline</button>
                    </div>
                </div>
            </div>
        )
    }
}

這是訂單組件，當我按下接受按鈕時，我想要顯示卡片。

export default class Order extends Component {
  render() {

    return (


    )
  }
}

Answer 1

如果我理解你的問題，你可以使用道具將狀態從父母傳遞給孩子

喜歡：

<Card
  stateOfMyCard={() => this.isMyCardOpened()}
  ...otherPropsForExample
/>

isMyCardOpened是父組件中的一個函數。

在您的子組件中，您獲得了道具，並且考慮到這是一個功能，您可以隨時調用它。

因此，在“接受按鈕”中的onClick事件中，您應該這樣做：

onClick={stateOfMyCard} or onClick={this.props.stateOfMyCard}

第二個是如果你沒有破壞你的道具

如果我已經解釋得很好，您應該在父組件和子組件中顯示您的卡，因為從子級調用setState並在父級中調用更新狀態。