通过传递动态elementref来调用JS函数

Question

我们如何传递在OnAfterRenderAsync中动态创建的html元素控件？我的情况是，我将为以下具有唯一ID的控件提供一个foreach循环。我需要绕过它们的引用来调用JS函数。所有文档参考都在谈论静态声明它们。感谢您的帮助！

<div id="dragdiv" @ref="dragdiv" class="dragdiv">
    <div id="mydivheader" class="dragdivheader">Click here to move</div>
</div>

@code {

    private ElementReference dragdiv;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {

          if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync(
                    "dragElement", dragdiv);
            }

    }

}

Answer 1

您可以通过多种方式进行操作。这是一个：

1. 定义div元素所在的组件
2. 定义一个名为ID的参数属性，以存储您引用的div的ID。此值从实例化组件的位置传递。
3. 注入IJSRuntime以执行JSInterop调用。
4. 定义ElementReference变量
5. 创建一个称为ClickMe的测试方法

DynamicDiv.razor

<div id="@ID" @ref="dragdiv" class="dragdiv">
    <div id="mydivheader" class="dragdivheader" @onclick="ClickMe">Click here to move</div>
</div>

@code {

    [Parameter]
    public string ID { get; set; }

    [Inject]
    public IJSRuntime JSRuntime { get; set; }
    private ElementReference dragdiv;

    private void ClickMe ()
    {
        JSRuntime.InvokeVoidAsync(
                "exampleJsFunctions.dragElement", dragdiv);
    }
}

1. 创建单击div时调用的JS方法。将此脚本放在_Host.cshtml文件的底部，恰好在下面

   <script src="_framework/blazor.server.js"></script>

   <script> window.exampleJsFunctions = { dragElement: function (element) { // element; window.alert(element.id); } }; </script>

用法

@for (var i = 0; i < 10; i++)
{
    var id = "dragDiv" + i.ToString();

    <DynamicDiv ID="@id"></DynamicDiv>
}