时间戳

首页 > 解决方案 > 如何在 Blazor 中获取单击事件的目标元素

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

问题描述

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

标签： blazorblazor-server-sideblazor-client-side

解决方案

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

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

例如：

反剃刀

@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

推荐阅读