Передать значение другому компоненту в ReactJs, когда onClickEvent не работает

Я передаю значение другому компоненту 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.

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;

javascript reactjs

01.04.2019 03:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

159

Ответы 4

Проблема в следующей части

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

Function.prototype.bind() не вызывает функцию, она возвращает новую функцию, которую необходимо вызвать, если вы используете функцию-оболочку. Просто нужно вызвать showOrder после привязки.

The bind() method creates a new function that, when called, has its this keyword set to the provided value

 <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.info('clicked')
}
document.querySelector('button').addEventListener('click',(e) => {
  myFunc.bind(this); //not called
})

<button>Click me!</button>

Работающий

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

<button>Click me!</button>

01.04.2019 04:09

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

write like this if you want to pass value

** только хочу сказать вам, что я предлагаю

— 01.04.2019 04:26

01.04.2019 04:25

От детей к родителям

Родитель

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

Дети

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

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

01.04.2019 07:23

Попробуй это

Карта водителя:

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

01.04.2019 10:41