web-dev-qa-db-ja.com

Blazorのクリックイベントでターゲット要素を取得する方法

ASP.NET Core blazorでクリックイベントがトリガーされた正確なターゲットが必要です。これは達成可能ですか？

blazorblazor-server-sideblazor-client-side
3
Prem Kumar

@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

3
Gabriel Cappelli