ASP.NET Core blazorでクリックイベントがトリガーされた正確なターゲットが必要です。これは達成可能ですか?
@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>