0

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

以下是组件代码

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;

但是当点击编辑按钮时，我收到这个错误（ 截图）

4

1 回答 1

0

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

更新

你需要改变你的地图代码

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)最后一行中的伎俩。

于 2017-12-26T07:14:23.903 回答