如何将整张卡传递到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并在父级中调用更新状态。