在 for 循环中使用 @ref 获取元素引用

Question

我试图在不同的地方获取同一个对象的位置，使用 javascript 函数，我应该得到不同的顶部位置，但情况并非如此。脚本代码：

<script type="text/javascript">
    window.ShowAlert = function myFunction(element) {   
    console.log("Hello World.");
    alert(element.offsetTop);
   }
</script>

Index.razor 代码：

@inject IJSRuntime jsRuntime

<div>
    @for (int i = 0; i < 10; i++)
    {
        <div @onclick="MemberFunction" @ref="memberRef">Click Here</div>
    }

</div>

@code {

    private ElementReference memberRef;
    void MemberFunction()
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef);
    }
}

正如您在此处看到的那样，我在同一个 div 中执行for，他在此下线。我想要的是对于每个发布的div，它应该给我一个不同的offsetTop 值，因为他一个接一个地走下去。我该如何解决这个问题？

为了更好地理解这里你有一个演示 https://blazorfiddle.com/s/4g57o82k 。正如您在演示中看到的，每个 Click Here 的值都是相同的。

感谢您的关注。

Answer 1

编辑：

我认为这是一个错误，所以我创建了一个issue。如果不是问题或得到解决，我会在这里更新。

看着docs about lambda expressions

不要在 lambda 表达式中直接在 for 循环中使用循环变量 (i)。否则，所有 lambda 表达式都使用相同的变量，导致 i 的值在所有 lambda 中都相同。始终在局部变量中捕获其值（上例中为buttonNumber），然后使用它。

所以看看这个问题和answer it was given，我稍微调整了一下并设法让它工作。

您需要在for 中定义一个新变量来保存i 的值。

@inject IJSRuntime jsRuntime

<div>
    @for(var i = 0; i < memberRef.Count(); i++)
    {
        var i2 = i;
        <div @onclick="() => MemberFunction(i2)" @ref="memberRef[i2]">Click Here</div>
    }
</div>

@code {

    private ElementReference[] memberRef { get; set; } = new ElementReference[11];
    void MemberFunction(int i)
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef[i]);
    }

}

这是一个有效的fiddle。