Javascript 在onClickEvent不工作时将值传递给ReactJs中的另一个组件

我正在将该值传递给另一个组件onclickEvent，但该值不会传递给另一个组件并显示空引用

我有两个组件，它们是DriverCards和DriverPendingOrders。我想将orderId的值从DriverCards传递给DriverPendingOrders

下面是我的两个工作组件

这是DriverCard组件

import React, { Component } from 'react';
import { connect } from "react-redux";
import PropTypes from "prop-types";

export default class DriverCard 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.bind(this,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>
        )
    }
}

import React，{Component}来自'React'；
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
导出默认类DriverCard扩展组件{
建造师（道具）{
超级（道具）；
} 
render（）{
让{OrderID，CID，DeliveryEst，DeliveryInstructions，DriverID，Orders，preInstruction，RID，Status，Total}=this.props.indOrder；
返回(
{CID}
{RID}
{/*
上次更新是在3分钟前
{this.props.removeOrder（OrderID）；this.props.showOrder.bind（this，OrderID）}class=“btn btn success btn sm”style={{width:'50%}>接受
减少
)
}
}

下面是DriverPendingOrder组件，我想在其中获取从DriverCard传递的orderID

import React, { Component } from 'react'
import { connect } from "react-redux";
import PropTypes from "prop-types";
import DriverPendingCard from './DriverPendingCard';


export class DriverPendingOrders extends Component{

    constructor() {
        super();
        this.state = {
            Orderslist: [
              {
                  OrderID:parseInt("001"),
                CID:123,
                DeliveryEst:"",
                DeliveryInstructions:"Door",
                DriverID:"",
                Orders:"ABC",
                PrepInsruction:"Mild",
                RID:"A",
                Status:"",
                Total:""

              },
              {   
                  OrderID:parseInt("002"),
                  CID:456,
                  DeliveryEst:"",
                  DeliveryInstructions:"Front Door",
                  DriverID:"",
                  Orders:"BCD",
                  PrepInsruction:"Medium",
                  RID:"B",
                  Status:"",
                  Total:""
              },
              {
                  OrderID:parseInt("003"),
                  CID:678,
                  DeliveryEst:"",
                  DeliveryInstructions:"Gate",
                  DriverID:"",
                  Orders:"DEF",
                  PrepInsruction:"Spicy",
                  RID:"C",
                  Status:"",
                  Total:""
              }
            ]
          }

    }
      showOrder(OrderID) {



        this.setState({ Orderslist: this.state.Orderslist.filter(order=> order.OrderID == OrderID)});

      }
    render(){
        let dCard1 = this.state.Orderslist.map(order => {
            return (
              <DriverPendingCard key={order.OrderID} showOrder={this.showOrder.bind(this)} inOrder1={order}/>

            )
          })

        return(

            <div>
                <ul class="list-group">

                    {dCard1}

                </ul>
            </div>
        )
    }
}

export default DriverPendingOrders;

import React，{Component}来自“React”
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
从“./DriverPendingCard”导入DriverPendingCard；
导出类DriverPendingOrders扩展组件{
构造函数（）{
超级（）；
此.state={
订单列表：[
{
OrderID:parseInt（“001”），
CID:123，
交货期：“，
送货说明：“门”，
DriverID:，
命令：“ABC”，
预说明：“轻度”，
里德：“A”，
地位：“，
总数：“”
},
{   
OrderID:parseInt（“002”），
CID:456，
交货期：“，
送货说明：“前门”，
DriverID:，
命令：“BCD”，
预说明：“中等”，
里德：“B”，
地位：“，
总数：“”
},
{
OrderID:parseInt（“003”），
CID:678，
交货期：“，
送货说明：“大门”，
DriverID:，
命令：“DEF”，
预说明：“辣”，
里德：“C”，
地位：“，
总数：“”
}
]
}
}
showOrder（OrderID）{
this.setState（{Orderslist:this.state.Orderslist.filter（order=>order.OrderID==OrderID）}）；
}
render（）{
让dCard1=this.state.Orderslist.map（order=>{
返回(
)
})
返回(

{dCard1}

)
}
}
导出默认驱动程序EndingOrders；

问题在以下部分

 <button type="button" onClick={() => {.....;this.props.showOrder.bind(this,OrderID)}}... 

下面是两个vanila js示例，以了解差异

非工作

函数myFunc（）{
console.log（'clicked'）
}
document.querySelector（'button'）。addEventListener（'click'，（e）=>{
myFunc.bind（this）；//未调用
})

---

点击我问题在以下部分

 <button type="button" onClick={() => {.....;this.props.showOrder.bind(this,OrderID)}}... 

下面是两个vanila js示例，以了解差异

非工作

函数myFunc（）{
console.log（'clicked'）
}
document.querySelector（'button'）。addEventListener（'click'，（e）=>{
myFunc.bind（this）；//未调用
})
点击我
this.showOrder（OrderID）**}inOrder1={order}/>
this.showOrder（OrderID）**}inOrder1={order}/>
从子级到父级

母公司

console.log（val）}/>

孩子们

to_Parent=（）=>{
这是来自儿童的道具（val）；
}
到_Parent（）}>
从子项到父项

母公司

console.log（val）}/>

孩子们

to_Parent=（）=>{
这是来自儿童的道具（val）；
}
到_Parent（）}>
试试看

驾驶员卡：

<button onClick={this.add}>Add</button>
...
...
  add = () => {
    this.props.passId(id);
}

 import { DriverCard } from "../DriverCard";
   ...
   ...
 <DriverCard passId={this.changedId}/>
    ...
    ...
    changedId = passedId => {
        this.setState({
          id: passedId
        });
      };

添加
...
...
添加=（）=>{
this.props.passId（id）；
}

驱动程序结束顺序：

<button onClick={this.add}>Add</button>
...
...
  add = () => {
    this.props.passId(id);
}

 import { DriverCard } from "../DriverCard";
   ...
   ...
 <DriverCard passId={this.changedId}/>
    ...
    ...
    changedId = passedId => {
        this.setState({
          id: passedId
        });
      };

从“./DriverCard”导入{DriverCard}；
...
...
...
...
changedId=passedId=>{
这是我的国家({
id:passedId
});
};
试试看

驾驶员卡：

<button onClick={this.add}>Add</button>
...
...
  add = () => {
    this.props.passId(id);
}

 import { DriverCard } from "../DriverCard";
   ...
   ...
 <DriverCard passId={this.changedId}/>
    ...
    ...
    changedId = passedId => {
        this.setState({
          id: passedId
        });
      };

添加
...
...
添加=（）=>{
this.props.passId（id）；
}

驱动程序结束顺序：

<button onClick={this.add}>Add</button>
...
...
  add = () => {
    this.props.passId(id);
}

 import { DriverCard } from "../DriverCard";
   ...
   ...
 <DriverCard passId={this.changedId}/>
    ...
    ...
    changedId = passedId => {
        this.setState({
          id: passedId
        });
      };

从“./DriverCard”导入{DriverCard}；
...
...
...
...
changedId=passedId=>{
这是我的国家({
id:passedId
});
};
**只想告诉你我的建议**只想告诉你我的建议