使用 Blazor 单击时发送动态参数 [重复]

Question

我正在尝试创建一个由红色方块组成的网格 (10 x 10)。每个方块都是一个<div> 元素，带有一个@onclick 函数。单击一个元素时，它应该将颜色变为红色。我已经设法使用以下代码将每个元素的背景绑定到一个返回颜色的方法：

@code{
    private string[,] _colors = new string[10,10];

    protected override void OnInitialized() {
        for(int r = 0; r < _colors.GetLength(0); r++) {
            for(int c = 0; c < _colors.GetLength(1); c++) {
                _colors[r, c] = "#FF0000";
            }
        }
    }

    private void ChangeColor(int r, int c) {
        _colors[r,c] = "#0000FF";
    }

    public string GetColor(int r, int c) {
        return _colors[r,c];
    }
}

所有非常基本的东西，似乎按预期工作。但是，我正在努力将参数 r 和 c 传递给ChangeColor，因为<div> 元素也是由代码生成的，就像这样（灵感来自this post ):

<div class="grid">
@for (int r = 0; r < 10; r++) {
    <div class="row">
    @for (int c = 0; c < 10; c++) {
        <div class="box"><div class="inner" style="background-color: @(GetColor(r,c));" @onclick="() => ChangeColor(r, c)">@((r*10+c).ToString())</div></div>
    }
    </div>
}
</div>

我以为 r 和 c 会得到它们在生成时的值，但它们总是 10（它们停止的值，在for 循环）。

有什么办法可以“存储” r 和 c 到元素并在我的onclick 事件中使用它？

Answer 1

它被称为“捕获循环变量”，谷歌。 Lambda 和 for 循环不能很好地结合在一起。

快速解决方法是制作副本：

@for (int r = 0; r < 10; r++) {
    int rr = r;
    <div class="row">
    @for (int c = 0; c < 10; c++) {
        int cc = c;
        <div class="box"><div class="inner" style="background-color: @(GetColor(r,c));" @onclick="() => ChangeColor(rr, cc)">@((r*10+c).ToString())</div></div>
    }