带有索引参数的Blazor/Razor onClick事件 [英] Blazor/razor onclick event with index parameter

问题描述

我有以下代码，但当我单击<tr>元素时传递的index参数始终为9。

因为我在作为数据传递给组件的表中有9行。 所以看起来索引始终是上次设置的变量‘i’的值…在本例中，Foreach循环中最后一行之后的i的值是9，因此在单击表中的所有行时，我得到的index参数为9...

我的代码没有为每一行onClick设置i值，这是什么问题？

    <table border="1">

        @for(int i=0;i< ListData.DataView.Table.Rows.Count; i++)
        {
            <tr @onclick="(() => RowSelect(i))">
                @foreach (ModelColumn col in ListData.ListColumns)
                {
                    <td>@ListData.DataView.Table.Rows[i][col.Name]</td>
                }
            </tr>
        }

    </table>

@code {
 
    private async Task  RowSelect(int rowIndex)
    {
        await ListRowSelected.InvokeAsync(rowIndex);
    }
}

推荐答案

常规

实际上，您的问题在于捕获局部变量的lambda。为简单起见，请参阅下面使用控制台应用程序进行的模拟。

class Program
{
    static void Main(string[] args)
    {
        Action[] acts = new Action[3];

        for (int i = 0; i < 3; i++)
            acts[i] = (() => Job(i));

        foreach (var act in acts) act?.Invoke();
    }

    static void Job(int i) => Console.WriteLine(i);
}

它将输出3, 3, 3三次，而不是0, 1, 2。

Blazor

引用官方文档关于EventCallback的内容：

<h2>@message</h2>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <button class="btn btn-primary"
            @onclick="@(e => UpdateHeading(e, buttonNumber))">
        Button #@i
    </button>
}

@code {
    private string message = "Select a button to learn its position.";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        message = $"You selected Button #{buttonNumber} at " +
            $"mouse position: {e.ClientX} X {e.ClientY}.";
    }
}

不要在lambda表达式中直接使用循环变量，例如前面的for循环示例中的i。否则，所有lambda表达式都使用相同的变量，这导致在所有lambda中使用相同的值。始终在局部变量中捕获变量的值，然后使用它。在前面的示例中，循环变量i被赋给buttonNumber。

所以您需要为i创建一个本地副本，如下所示。

@for(int i=0;i< ListData.DataView.Table.Rows.Count; i++)
{
   int buffer=i;
    <tr @onclick="(() => RowSelect(buffer))">
        @foreach (ModelColumn col in ListData.ListColumns)
        {
            <td>@ListData.DataView.Table.Rows[i][col.Name]</td>
        }
    </tr>
}

这篇关于带有索引参数的Blazor/Razor onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！