如何在 Blazor 中获取单击事件的目标元素答案

【问题标题】：How to obtain the target element on click event in Blazor如何在 Blazor 中获取单击事件的目标元素
【发布时间】：2020-03-31 11:04:16
【问题描述】：

我想要在 ASP.NET Core blazor 中触发点击事件的确切目标。这可以实现吗？

【问题讨论】：

将 id 传递给您的事件处理程序
如果你需要的不仅仅是来自火星指针的agua。那么这个问题是关于细节的，如果你想更具体，我会尽力帮助你。

标签： blazor blazor-server-side blazor-client-side

【解决方案1】：

您可以使用 @ref 获取对 DOM 对象的引用，然后将其作为参数传递给您的处理函数。

然后您可以将其作为参数传递给 JS 互操作。

例如：

Counter.razor

@page "/counter"
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<p>Last button clicked: @lastButtonClicked</p>

<button @ref=button1 class="btn btn-primary" @onclick="@(()=>IncrementCount(@button1))">Click me</button>
<button @ref=button2 class="btn btn-primary" @onclick="@(()=>IncrementCount(@button2))">Click me</button>


@code {

    private ElementReference button1;
    private ElementReference button2;

    private int currentCount = 0;
    private string lastButtonClicked = "None";

    private async void IncrementCount(ElementReference element)
    {
        currentCount++;
        await JSRuntime.InvokeVoidAsync("setElementText", element, "I was clicked");
    }
}

并确保将此脚本添加到 Index.html

<script>
    window.setElementText = (element, text) => { console.log(element); element.innerText = text; }
</script>

参考：https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.1#detect-when-a-blazor-app-is-prerendering

【讨论】：

【解决方案2】：

在 .razor 文件中：

@for (int i = 0; i < 1000; i++)
{
    int j = i;
    <input type="text" @onchange='eventargs => HandleValueChange(eventargs, "my first textbox from row " + j.ToString())' />
    <input type="text" @onchange='eventargs => HandleValueChange(eventargs, "my second textbox from row " + j.ToString())' />
}

@code {
    protected void HandleValueChange(ChangeEventArgs evt, string elementID)
    {

    }
}

注意：这里的关键是 int j = i 在内循环范围内的声明...如果您将 i 传递给事件处理程序，您将始终得到“1000”，即它是来自外循环范围的最终值

【讨论】：

【解决方案3】：

如果您不需要 ElementReference 但只是不想在 JavaScript 中使用单击的元素，Blazor wasm：

当您在单击后使用 js 互操作调用任何函数时，您会惊讶地发现一个已定义的变量 event（您不必向函数传递任何内容），其中包含有关单击的信息、目标元素显然会在event.target里面。

如果您知道为什么会这样，请编辑此答案。它看起来就像一个奇迹.. :)

【讨论】：