Question

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

以下是组件代码

            var bl:int = ba.x - (ball.width / 2);
            var br:int = ba.x + (ball.width / 2);
            var bt:int = ba.y - (ball.height / 2);
            var bb:int = ba.y + (ball.height / 2);

            var hl:int = pt.x - (hitBrick.width / 2);
            var hr:int = pt.x + (hitBrick.width / 2);
            var ht:int = pt.y - (hitBrick.height / 2);
            var hb:int = pt.y + (hitBrick.height / 2);

            if (hb <= bt)
            {

                ConsoleUtil.consoleIt("TableScreen.as :: chkColision - " + "Bottom.");
                _totalScore++;
                ball._orignalYSpeed = -ball.yspeed;
                ball.yspeed = -ball.yspeed + 5;
                ball._stopBall = true;
                ball._bottomOne = true;
                ball.updateCounterInBricks(hitBrick);

                return;
            }

            if ((hl >= bl))
            {
                ConsoleUtil.consoleIt("TableScreen.as :: chkColision - Left");
                _hitOnWall = true;
                ball._orignalXSpeed = -ball.xspeed;
                var xSp:Number = ball.xspeed = -ball.xspeed - 5;
                ball._left = true;
                ball.updateCounterInBricks(hitBrick);
                _totalScore++;
                return;
            }

            if(hb<=bb)
            {
                ConsoleUtil.consoleIt("TableScreen.as :: chkColision - " + "Bottom.");
                _totalScore++;
                ball._orignalYSpeed = -ball.yspeed;
                ball.yspeed = -ball.yspeed + 5;
                ball._stopBall = true;
                ball._bottomOne = true;
                ball.updateCounterInBricks(hitBrick);
                return;
            }
            if ((hr <= br))
            {
                ConsoleUtil.consoleIt("TableScreen.as :: chkColision - Rigth");
                _hitOnWall = true;
                ball._orignalXSpeed = -ball.xspeed;
                var xSp:Number = ball.xspeed = -ball.xspeed + 5;
                ball._left = true;
                ball._stopBall = true;
                ball.updateCounterInBricks(hitBrick);
                _totalScore++;
                return;
            }
            if (ht >= bt)
            {
                ConsoleUtil.consoleIt("TableScreen.as :: chkColision - " + "Top");
                _totalScore++;
                ball._orignalYSpeed = -ball.yspeed;
                ball.yspeed = -ball.yspeed - 5;

                ball._topOne = true;
                ball._stopBall = true;
                ball.updateCounterInBricks(hitBrick);
                return;
            }

        }`

但是当点击编辑按钮时，我收到此错误（ Screenshot）

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)可以解决问题。

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

1 个答案: