ReactJs - Parameter an Event Handler übergeben

Question

Ich habe gerade angefangen, die Grundlagen von ReactJs zu suchen. Das folgende ist meine Komponente, um die Liste der Busse anzuzeigen. Was ich genau will ist, ich möchte bearbeiten/löschen Operationen über Busse. Aber ich bin nicht in der Lage BusID des entsprechenden Busses zu meinen Edit/Delete-Methoden zu übergeben.

Es folgt Komponentencode

import React, {Component} from "react"; 
import { withRouter } from 'react-router-dom' 
import {Table,Badge, Label,FormGroup,Container, Row, Col, CardGroup, Card, CardBlock,CardHeader, Button, Input, InputGroup, InputGroupAddon} from "reactstrap"; 

import {appSettings} from '../../../../Utils/Util.js'; 
import Pagination from "react-js-pagination"; 

var axios = require('axios'); 

class BusList extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      busList:[] 
     }; 
     this.loadBuses = this.loadBuses.bind(this); 
    } 

    componentWillMount() { 
     this.loadBuses(); 
    } 

    loadBuses() { 

     var url = ‘my-api-complete-url-here’; 
     axios.get(url) 
      .then((result) => { 

       var key = 0; 
       var buses = result.data.map(function(bus,i){ 
        return <tr key={key++}> 
         <td key={key++}>{bus.id}</td> 
         <td key={(key++)}>{bus.number}</td> 
         <td key={(key++)}> 
           <Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button> 
           <Button onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button> 
         </td> 
        </tr> 
       }); 
       this.setState({busList: buses}); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 
    } 

    render() { 
     return (
      <div className="animated fadeIn"> 

           <Table hover responsive striped> 
            <thead> 
            <tr> 
             <th>Sr #</th> 
             <th>Bus Number</th> 
             <th>Action</th> 
            </tr> 
            </thead> 
            <tbody> 
             {this.state.busList} 
            </tbody> 
           </Table> 
      </div> 
     ); 
    } 

    editBus(id, e) { 
     console.log(‘Edit - Bus Id = ' +id); 
    } 

    deleteBus(id, e) { 
     console.log('Delete - Bus Id = ' +id); 
    } 
} 

export default BusList; 

Aber wenn auf Schaltfläche Bearbeiten angezapft, erhalte ich diesen Fehler ( Screenshot)

Answer 1

Sie es in falscher Reihenfolge zuzugreifst, Sie vorbei (e)=>this.editBus(e, bus.id) und in Funktion können Sie außerdem editBus(id, e)

definiert haben müssen Sie bind(this) am Ende der map-Funktion

var buses = result.data.map(function(bus,i){ 
    return <tr key={key++}> 
     <td key={key++}>{bus.id}</td> 
     <td key={(key++)}>{bus.number}</td> 
     <td key={(key++)}> 
      <Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button> 
      <Button onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button> 
     </td> 
    </tr> 
}); 

Außerdem müssen Sie key Variable nicht definieren. Verwenden Sie stattdessen das zweite Argument i der Kartenfunktion, da dies der Index des Array-Elements ist.

Sie Ihre Karte Code ändern müssen aktualisiert mit

var buses = result.data.map(function(bus,i){ 
    return <tr key={key++}> 
     <td key={key++}>{bus.id}</td> 
     <td key={(key++)}>{bus.number}</td> 
     <td key={(key++)}> 
      <Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button> 
      <Button onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button> 
     </td> 
    </tr> 
}.bind(this)); 

Die .bind(this) in der letzten Zeile der Trick funktioniert.