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

Question

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

10

我正在尝试获取同一对象在不同位置的位置，使用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);
    }
}

您可以看到，在同一个

中我正在使用for，它会按顺序向下移动。我希望每个发布的

都能给我一个不同的offsetTop值，因为它是按顺序一个一个向下移动的。我该如何解决这个问题？

为了更好的理解，您可以参考演示https://blazorfiddle.com/s/4g57o82k. 如您所见，每个Click Here的值都是相同的。

感谢您的关注。

- LOL Jovem

可能是获取元素相对于父容器的位置/偏移量？的重复问题。 - ControlAltDel

@ControlAltDel 让我来检查一下。 - LOL Jovem

@BabarBilal 你建议怎么做？ - LOL Jovem

@ControlAltDel 我不这么认为，我遇到了一个问题，同一对象的相同值在不同位置上出现，而不是获取相对于父级的元素位置。 - LOL Jovem

2

我偶然发现了这个问题，并找到了一种传递索引的方法：https://blazorfiddle.com/s/50nwz2is - user5734311

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vencovsky · Accepted Answer

编辑:

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

查看有关lambda表达式的文档

不要直接在lambda表达式中使用循环变量(i)。否则，所有lambda表达式都将使用相同的变量，导致i的值在所有lambda中都相同。始终在本地变量(buttonNumber)中捕获其值，然后使用它。

因此，在查看问题和给出的答案后，我进行了一些微调并设法使其正常工作。

您需要在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]);
    }

}

这里有一个可用的代码片段。