ReactJs - イベントハンドラへのパラメータの受け渡し

Question

私はReactJの基礎を学び始めました。以下はバスのリストを表示する私のコンポーネントです。私が正確に欲しいのは、バス上で編集/削除操作を実行したいということです。しかし、対応するバスのbusIdを私の編集/削除メソッドに渡すことはできません。あなたが間違った順序でそれにアクセスしている

Answer 1

後

は、コンポーネントのコード

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; 

である。しかし、編集ボタンをタップしたときに、私は（ Screenshot）このエラーを受け取り、あなたは(e)=>this.editBus(e, bus.id)を渡すとでていますあなたが定義した関数editBus(id, e)

また、マップの最後にbind(this)が必要です。

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

また、keyという変数を定義する必要はありません。代わりに、マップ関数の第2引数iを配列要素のインデックスとして使用します。

を更新

あなたは最後の行の.bind(this)は、トリックを行います

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

であなたのマップコードを変更する必要があります。