Question

我将值传递给另一个组件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>
        )
    }
}

下面是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;

Answer 1

尝试

DriverCard：

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

DriverPendingOrder：

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

Answer 2

问题出在以下部分

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

Function.prototype.bind()不会调用该函数，它会返回一个新函数，如果您使用包装器函数，则需要调用。绑定后只需调用showOrder。

bind()方法创建一个新的function ，在调用时，将其this关键字设置为提供的值

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

下面是两个Vanila js示例，以查看区别

不工作

function myFunc(){
  console.log('clicked')
}
document.querySelector('button').addEventListener('click',(e) => {
  myFunc.bind(this); //not called
})

<button>Click me!</button>

工作

function myFunc(){
  console.log('clicked')
}
document.querySelector('button').addEventListener('click',(e) => {
  let temp = myFunc.bind(this) //not called
  
  console.log(typeof temp); //function
  
  temp(); //funtion called
  
})

<button>Click me!</button>

Answer 3

从孩子到父母

父母

<ChildComp from_children={(val)=>console.log(val)}/>

孩子

to_Parent=()=>{
this.props.from_children(val);
}

<Button onclick={()=>to_Parent()}>

Answer 4

 <DriverPendingCard key={order.OrderID} **showOrder={()=>this.showOrder(OrderID)**} inOrder1={order}/>

如果要传递值

将值传递给onClickEvent上ReactJs中的另一个组件不起作用

4 个答案:

不工作

工作