Blazor：将变量参数传递给onclick函数

Question

我想把int i传递给每个列表项的按钮单击功能。我希望"clickItem"函数分别接收0、1、2作为对应的列表项。但实际上，它总是接收3作为参数。看起来在for循环渲染时，clickItem(i)中的变量i没有被评估。我尝试将其更改为"clickItem(@i)"，但结果仍然相同。我该怎么办？（我正在使用blazor服务器端，.net core 3预览5）

        @for (int i = 0; i < 3; i++)
        {
            <li> item @i <button onclick=@(() => clickItem(i))>Click</button> </li>
        }

- Raymond Wong

Answer 1

这是一个经典问题，但在 Blazor 的背景下稍有不同。

你需要复制 i，否则会出现“lambda 捕获了循环变量”的情况。捕获复制品是可以的。

@for (int i = 0; i < 3; i++)
{
    int localCopy = i;
    <li> item @i <button onclick=@(() => clickItem(localCopy))>Click</button> </li>
}

请注意，这是for()循环的问题，而不是foreach()，并且仅出现在=>的右侧。

- H H

---

谢谢Henk，它有效了。但我不明白其中的根本区别。为什么“copy”和“i”会被不同对待？有没有一些参考资料可以让我进一步学习？ - Raymond Wong

请查看我的答案，了解详细解释：https://dev59.com/drLma4cB1Zd3GeqPerG1#55278788 - enet

你可以在谷歌上搜索“lambda 'captures' the loop variable”，会有数十个问题和答案，大多数都在SO上。这就是为什么我没有让这个答案太长的原因。 - H H

Answer 2

如果你想使用foreach循环，可以参考下面的示例。

在循环内部声明一个名为index的变量，该变量用于使用items列表上的IndexOf方法存储当前项的索引。当单击按钮时，将此索引作为参数传递给clickItem函数。

@foreach (var item in items)
{
    var index = items.IndexOf(item);
    <li> item @item 
        <button onclick=@(() => clickItem(index))>Click</button>
    </li>
}

- Ibrahim Timimi

Answer 3

我尝试了这个，它有效。希望对你有所帮助。

 @foreach (var item in ListOfUser)
            {
                <tr>
                    <td>@item.FirstName</td>
                    <td>
                        <button @onclick="(() => GetDetail(item.UserId)) "> Click</button>
                    </td>
                </tr>
            }

- sami ullah

---

是的，foreach()和for()不会有相同的问题。但在这个问题中，需要使用i。 - H H