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

【问题标题】：Call JS function by passing dynamic elementref通过传递动态 elementref 调用 JS 函数
【发布时间】：2019-12-05 16:47:45
【问题描述】：

我们如何传递在 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);
            }

    }

}

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

您可以通过多种方式做到这一点。这是一个：

定义 div 元素所在的组件
定义一个名为 ID 的参数属性来存储您引用的 div 的 ID。此值是从您的组件实例化的位置传递的。
注入 IJSRuntime 以执行 JSInterop 调用。
定义 ElementReference 变量
创建一个名为 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);
    }
}

创建一个 JS 方法，当你的 div 被点击时调用。将此脚本放在 _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>
}

【讨论】：