Question

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

Answer 1

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

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

例如：

Counter.razor

scanf("%s", name);

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

@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");
    }
}

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

Answer 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”，即它是外循环作用域的最终值

Answer 3

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

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

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

如何在Blazor中获得click事件上的目标元素

3 个答案: