点击Blazor发送动态参数

Question

我正在尝试创建一个红色正方形的网格(10 x 10(。每个正方形是具有@onclick函数的<div>元素。当一个元素被点击时，它应该将颜色更改为红色。我已经设法将每个元素的背景绑定到一个方法上，该方法使用以下代码返回颜色：

@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>元素也是由代码生成的，如下所示(受本文启发(：

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