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

Question

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

Answer 1

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

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

例如:

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