ReactJS-将参数传递给事件处理程序

Question

我刚刚开始寻找ReactJ的基础知识。以下是我显示公共汽车列表的组件。我想要的是我要通过总线执行编辑/删除操作。但无法将相应总线的BUS传递给我的编辑/删除方法。

以下是组件代码

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;

但是，当在编辑按钮上轻按时，我会收到此错误（屏幕截图）

Answer 1

您正在以错误的顺序访问它，您正在通过(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变量。相反，使用MAP函数的第二个参数i作为数组元素的索引。

更新

您需要使用

更改地图代码

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

最后一行中的.bind(this)可以做到。