ASP.NET Core Blazor eseménykezelése

Ez a cikk ismerteti Blazoreseménykezelési funkcióit, beleértve az esemény argumentumtípusait, az eseményvisszahívásokat és az alapértelmezett böngészőes események kezelését.

Eseménykezelők delegálása

Delegált eseménykezelők megadása Razor összetevő korrektúrában @on{DOM EVENT}="{DELEGATE}"Razor szintaxissal:

• A {DOM EVENT} helyőrző egy DOM-esemény (például click).
• A {DELEGATE} helyőrző a C# delegált eseménykezelő.

Eseménykezeléshez:

• Az Blazor Web Apps delegált eseménykezelői csak olyan összetevőkben vannak meghívva, amelyek interaktív renderelési módot alkalmaznak. A cikkben szereplő példák feltételezik, hogy az alkalmazás globálisan interaktív renderelési módot alkalmaz az alkalmazás fő összetevőjében, általában a App összetevőben. További információ: ASP.NET Core Blazor renderelési módok.
• A Task (async Task) visszaadó aszinkron delegált eseménykezelőket Blazor támogatják, és Blazor Web App és Blazor WebAssembly dokumentációs példák támogatják.
• Az eseménykezelők delegálása automatikusan aktivál egy felhasználói felületi renderelést, így nem kell manuálisan meghívni StateHasChanged.
• A kivételeket naplózza a rendszer.

Fontos

A Blazor keretrendszer nem követi nyomon a void-et visszaadó aszinkron metódusokat (async). Ennek eredményeképpen a teljes folyamat meghiúsul, ha a rendszer nem kap kivételt, ha void visszaadják. Mindig aszinkron Task/ValueTask metódusokból ad vissza egy értéket.

A következő kód:

• Meghívja a UpdateHeading metódust, ha a gomb ki van jelölve a felhasználói felületen.
• Meghívja a CheckChanged metódust, ha a felhasználói felületen módosítja a jelölőnégyzetet.

EventHandler1.razor:

@page "/event-handler-1"

<PageTitle>Event Handler 1</PageTitle>

<h1>Event Handler Example 1</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading() => headingValue = $"New heading ({DateTime.Now})";

    private void CheckChanged() => checkedMessage = $"Last change {DateTime.Now}";
}

Az alábbi példában UpdateHeading:

• Aszinkron hívás történik, amikor a gombot kiválasztják.
• Két másodpercet vár a címsor frissítése előtt.

EventHandler2.razor:

@page "/event-handler-2"

<PageTitle>Event Handler 2</PageTitle>

<h1>Event Handler Example 2</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

Beépített eseményargumentumok

Az eseményargumentumtípust támogató események esetében csak akkor szükséges eseményparamétert megadni az eseménymetódus definíciójában, ha az eseménytípust használja a metódus. Az alábbi példában a MouseEventArgs metódusban ReportPointerLocation az egér koordinátáit tartalmazó üzenet szövegének beállítására szolgál, amikor a felhasználó kiválaszt egy gombot a felhasználói felületen.

EventHandler3.razor:

@page "/event-handler-3"

<PageTitle>Event Handler 3</PageTitle>

<h1>Event Handler Example 3</h1>

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e) => 
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
}

Az alábbi táblázatban láthatóak a támogatott EventArgs-k.

Esemény	Osztály	DOM-jegyzetek
Vágólap	ClipboardEventArgs
Húz	DragEventArgs	DataTransfer és DataTransferItem tartalmazza a húzott elem adatokat. Húzzuk és ejtsük implementációját a Blazor alkalmazásokban JS interoperabilitással a HTML Drag and Drop APIhasználatával.
Hiba	ErrorEventArgs
Esemény	EventArgs	EventHandlers attribútumokat tartalmaz az eseménynevek és az eseményargumentum-típusok közötti leképezések konfigurálásához.
Fókusz	FocusEventArgs	Nem tartalmazza a relatedTargettámogatását.
Bemenet	ChangeEventArgs
Billentyűzet	KeyboardEventArgs
Egér	MouseEventArgs
Egérmutató	PointerEventArgs
Egérkerék	WheelEventArgs
Haladás	ProgressEventArgs
Érintés	TouchEventArgs	TouchPoint érintésérzékeny eszközön egyetlen kapcsolattartási pontot jelöl.

További információt a következő források tartalmaznak:

• EventArgs ASP.NET Core referenciaforrás osztályai (dotnet/aspnetcore main ág)

  Megjegyzés

  A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

• EventHandlers attribútumokat tartalmaz az eseménynevek és az eseményargumentum-típusok közötti leképezések konfigurálásához.

Egyéni eseményargumentumok

Blazor támogatja az egyéni eseményargumentumokat, amelyek lehetővé teszik, hogy tetszőleges adatokat adjon át a .NET-eseménykezelőknek egyéni eseményekkel.

Általános konfiguráció

Az egyéni eseményargumentumokkal rendelkező egyéni események általában az alábbi lépésekkel engedélyezve vannak.

JavaScriptben definiáljon egy függvényt az egyéni eseményargumentum-objektum forráseseményből való létrehozásához:

function eventArgsCreator(event) { 
  return {
    customProperty1: 'any value for property 1',
    customProperty2: event.srcElement.id
  };
}

A event paraméter egy DOM-esemény.

Regisztrálja az egyéni eseményt az előzőleg meghatározott kezelővel a JavaScript inicializálóban. Adja meg a megfelelő böngészőes eseménynevet browserEventName, amely az ebben a szakaszban látható példában click a felhasználói felületen található gombkijelöléshez.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js (a {PACKAGE ID/ASSEMBLY NAME} helyőrző az alkalmazás csomagazonosítója vagy szerelvényneve):

Blazor Web Appesetén:

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

Blazor Server vagy Blazor WebAssembly alkalmazás esetén:

export function afterStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

A registerCustomEventType hívása eseményenként csak egyszer történik egy szkriptben.

A registerCustomEventTypehívásához használja a blazor indítási esemény által biztosított b paramétert (kisbetűs Blazor). Bár a regisztráció érvényes a Blazor objektum (nagybetűs B) használatakor, a paraméter használata javasolt.

Az előző példában szereplő customevent egyéni eseménynév nem lehet azonos egy fenntartott Blazor eseménynévvel. A fenntartott nevek megtalálhatók a Blazor keretrendszer referenciaforrásában (lásd a registerBuiltInEventType függvény hívásait).

Megjegyzés

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Osztály definiálása az eseményargumentumokhoz:

namespace BlazorSample.CustomEvents;

public class CustomEventArgs : EventArgs
{
    public string? CustomProperty1 {get; set;}
    public string? CustomProperty2 {get; set;}
}

Az egyéni eseményt az eseményargumentumokkal összefűzheti egy [EventHandler] attribútum megjegyzés hozzáadásával az egyéni eseményhez:

• Ahhoz, hogy a fordító megtalálja a [EventHandler] osztályt, egy C#-osztályfájlba (.cs) kell helyeznie, ami normál felső szintű osztálysá teszi.
• Jelölje meg az osztályt public.
• Az osztálynak nincs szüksége tagokra.
• A hívni ahhoz, hogy a EventHandlers fordító megtalálja.
• Helyezze az osztályt az alkalmazáshoz tartozó névtér alá.
• Importálja a névteret az eseményt használó Razor összetevőbe (.razor).

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustomevent", typeof(CustomEventArgs),
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

Regisztrálja az eseménykezelőt egy vagy több HTML-elemen. A JavaScriptből a delegált kezelő metódusban átadott adatok elérése:

@using BlazorSample.CustomEvents

<button id="buttonId" @oncustomevent="HandleCustomEvent">Handle</button>

@if (!string.IsNullOrEmpty(propVal1) && !string.IsNullOrEmpty(propVal2))
{
    <ul>
        <li>propVal1: @propVal1</li>
        <li>propVal2: @propVal2</li>
    </ul>
}

@code
{
    private string? propVal1;
    private string? propVal2;

    private void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        propVal1 = eventArgs.CustomProperty1;
        propVal2 = eventArgs.CustomProperty2;
    }
}

Ha @oncustomeventnem ismeri fel a attribútumot, győződjön meg arról, hogy az összetevő vagy a _Imports.razor fájl tartalmaz egy @using utasítást a EventHandler osztályt tartalmazó névtérhez.

Amikor az egyéni esemény aktiválódik a DOM-on, a rendszer meghívja az eseménykezelőt a JavaScriptből átadott adatokkal.

Ha egyéni eseményt próbál elindítani, bubbles-t engedélyezni kell úgy, hogy értékét true-re állítja. Ellenkező esetben az esemény nem éri el a Blazor kezelőt a C# egyéni [EventHandler] attribútum osztályba való feldolgozáshoz. További információ: MDN Web Docs: Event bubbling.

Az egyéni vágólap beillesztési esemény példája

Az alábbi példa egy egyéni vágólap beillesztési eseményt kap, amely tartalmazza a beillesztés időpontját és a felhasználó beillesztett szövegét.

Deklaráljon egy egyéni nevet (oncustompaste) az eseményhez, és egy .NET-osztályt (CustomPasteEventArgs) az eseményhez tartozó eseményargumentumok tárolásához:

CustomEvents.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustompaste", typeof(CustomPasteEventArgs), 
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

public class CustomPasteEventArgs : EventArgs
{
    public DateTime EventTimestamp { get; set; }
    public string? PastedData { get; set; }
}

JavaScript-kód hozzáadása a EventArgs alosztály adatainak megadásához az előző kezelővel egy JavaScript-inicializáló. Az alábbi példa csak a szöveg beillesztését kezeli, de tetszőleges JavaScript API-k használatával kezelheti a más típusú adatokat, például képeket beillesztő felhasználókat.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js:

Blazor Web Appesetén:

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

Blazor Server vagy Blazor WebAssembly alkalmazás esetén:

export function afterStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

Az előző példában a fájlnév {PACKAGE ID/ASSEMBLY NAME} helyőrzője az alkalmazás csomagazonosítóját vagy szerelvénynevét jelöli.

Megjegyzés

A registerCustomEventTypehívásához használja a blazor indítási esemény által biztosított b paramétert (kisbetűs Blazor). Bár a regisztráció érvényes a Blazor objektum (nagybetűs B) használatakor, a paraméter használata javasolt.

Az előző kód tájékoztatja a böngészőt, hogy amikor natív paste esemény történik:

• custompaste esemény létrehozása.
• Adja meg az eseményargumentumok adatait a megadott egyéni logikával:
  • A eventTimestamp-hoz hozzon létre egy új dátumot.
  • A pastedData-hez szerezze be a vágólap adatokat szövegként. További információért lásd: MDN Web Docs: ClipboardEvent.clipboardData.

Az eseménynév-konvenciók különböznek a .NET és a JavaScript között:

• A .NET-ben az eseménynevek előtagja "on".
• A JavaScriptben az eseménynevek nem rendelkeznek előtaggal.

Egy Razor összetevőben csatolja az egyéni kezelőt egy elemhez.

CustomPasteArguments.razor:

@page "/custom-paste-arguments"
@using BlazorSample.CustomEvents

<label>
    Try pasting into the following text box:
    <input @oncustompaste="HandleCustomPaste" />
</label>

<p>
    @message
</p>

@code {
    private string? message;

    private void HandleCustomPaste(CustomPasteEventArgs eventArgs)
    {
        message = $"At {eventArgs.EventTimestamp.ToShortTimeString()}, " +
            $"you pasted: {eventArgs.PastedData}";
    }
}

Lambda-kifejezések

Lambda-kifejezések delegált eseménykezelőként támogatottak.

EventHandler4.razor:

@page "/event-handler-4"

<PageTitle>Event Handler 4</PageTitle>

<h1>Event Handler Example 4</h1>

<h2>@heading</h2>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

Gyakran kényelmes további értékeket bezárni C# metódusparaméterekkel, például egy elemcsoporton való iteráláskor. Az alábbi példa három gombot hoz létre, amelyek mindegyike meghívja UpdateHeading, és átadja a következő adatokat:

• Eseményargumentum (MouseEventArgs) a e.
• A buttonNumbergombszáma.

EventHandler5.razor:

@page "/event-handler-5"

<PageTitle>Event Handler 5</PageTitle>

<h1>Event Handler Example 5</h1>

<h2>@heading</h2>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber) => 
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
}

Ha nagy számú eseménydelegáltat hoz létre egy ciklusban, az rossz renderelési teljesítményt okozhat. További információ: ASP.NET Core Blazor renderelési teljesítményre vonatkozó ajánlott eljárások.

Kerülje a ciklusváltozó használatát közvetlenül a lambda kifejezésben, például i az előző for hurok példájában. Ellenkező esetben az összes lambdakifejezés ugyanazt a változót használja, így az összes lambda ugyanazt az értéket használja. Rögzítse a változó értékét egy helyi változóban. Az előző példában:

• A ciklusváltozó ibuttonNumbervan hozzárendelve.
• buttonNumber a lambda kifejezésben használatos.

Alternatívaként használjon egy foreach hurkot Enumerable.Range-tel, ami nem szenved a korábban említett problémától.

@foreach (var buttonNumber in Enumerable.Range(1, 3))
{
    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@buttonNumber
        </button>
    </p>
}

EventCallback

A beágyazott összetevőkkel kapcsolatos gyakori forgatókönyv az, hogy egy gyermekösszetevő eseményének bekövetkezésekor végrehajtunk egy metódust a szülőösszetevőben. A gyermekösszetevőn belüli onclick esemény gyakori használati eset. Ha eseményeket szeretne elérhetővé tenni az összetevők között, használja a EventCallback. A szülőösszetevő visszahívási függvényt rendelhet a gyermekösszetevő EventCallback-hoz.

Az alábbi Child összetevő bemutatja, hogyan van beállítva egy gomb onclick kezelője a minta EventCallback-ából érkező ParentComponent delegált fogadására. A EventCallbackMouseEventArgsvan begépelve, amely egy perifériaeszközről származó onclick eseményhez megfelelő.

Child.razor:

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

A szülőösszetevő a gyermek EventCallback<TValue> (OnClickCallback) értékét a saját ShowMessage metódusára állítja.

ParentChild.razor:

@page "/parent-child"

<PageTitle>Parent Child</PageTitle>

<h1>Parent Child Example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e) => 
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
}

Ha a gomb ki van jelölve a ChildComponent:

• A rendszer meghívja a Parent összetevő ShowMessage metódusát. message frissül, és megjelenik a Parent összetevőben.
• A visszahívási metódus (StateHasChanged) nem igényel ShowMessage hívását. StateHasChanged automatikusan hívódik meg a Parent összetevő újrarajzolására, ahogyan a gyermek komponens eseményei is újrarajzolást váltanak ki az eseménykezelőkben, amelyek a gyermek komponensen belül futnak le. További információkért tekintse meg az ASP.NET Core Razor összetevő renderelését.

EventCallback és EventCallback<TValue> használata eseménykezelési és kötési összetevőparaméterekhez.

Előnyben részesítse az erősen gépelt EventCallback<TValue>EventCallbackhelyett. EventCallback<TValue> továbbfejlesztett hibavisszajelzést biztosít, ha nem megfelelő típust használ, és az összetevő felhasználóit a megfelelő megvalósítás felé irányítja. Más felhasználói felületi eseménykezelőkhöz hasonlóan az eseményparaméter megadása nem kötelező. Használja EventCallback-t, ha nincs átadva érték a visszahívásnak.

EventCallback és EventCallback<TValue> engedélyezik az aszinkron meghatalmazottakat. EventCallback gyengén van begépelve, és lehetővé teszi bármely típusargumentum átadását InvokeAsync(Object). EventCallback<TValue> szigorúan típusos, és egy T argumentumot kell átadni InvokeAsync(T)-ban, amely hozzárendelhető TValue-hoz.

Használjon egy EventCallback vagy EventCallback<TValue>InvokeAsync-vel, és várja meg a Task-at:

await OnClickCallback.InvokeAsync({ARGUMENT});

Az előző példában a {ARGUMENT} helyőrző nem kötelező argumentum.

Az alábbi szülő-gyermek példa bemutatja a technikát.

Child2.razor:

<h3>Child2 Component</h3>

<button @onclick="TriggerEvent">Click Me</button>

@code {
    [Parameter]
    public EventCallback<string> OnClickCallback { get; set; }

    private async Task TriggerEvent()
    {
        await OnClickCallback.InvokeAsync("Blaze It!");
    }
}

ParentChild2.razor:

@page "/parent-child-2"

<PageTitle>Parent Child 2</PageTitle>

<h1>Parent Child 2 Example</h1>

<div>
    <Child2 OnClickCallback="(value) => { message1 = value; }" />
    @message1
</div>

<div>
    <Child2 OnClickCallback=
        "async (value) => { await Task.Delay(2000); message2 = value; }" /> 
    @message2
</div>

@code {
    private string message1 = string.Empty;
    private string message2 = string.Empty;
}

A Child2 összetevő második előfordulása aszinkron visszahívást mutat be, és az új message2 érték két másodperces késleltetéssel van hozzárendelve és megjelenítve.

Alapértelmezett műveletek megakadályozása

A @on{DOM EVENT}:preventDefault direktíva attribútum használatával megakadályozhatja egy olyan esemény alapértelmezett műveletét, amelyben a {DOM EVENT} helyőrző egy DOM-esemény.

Ha egy beviteli eszközön egy kulcs van kijelölve, és az elem fókusza egy szövegdobozon van, a böngésző általában megjeleníti a kulcs karakterét a szövegdobozban. Az alábbi példában az alapértelmezett viselkedést a @onkeydown:preventDefault direktíva attribútum megadásával akadályozzuk meg. Ha a fókusz a <input> elemre kerül, a számláló a Shift++billentyűkombinációval növekszik. A + karakter nincs hozzárendelve a <input> elem értékéhez. A keydownMDN Web Docs: Document: keydown eseménycímű témakörben talál további információt.

EventHandler6.razor:

@page "/event-handler-6"

<PageTitle>Event Handler 6</PageTitle>

<h1>Event Handler Example 6</h1>

<p>For this example, give the <code><input></code> focus.</p>

<p>
    <label>
        Count of '+' key presses: 
        <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
    </label>
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

A @on{DOM EVENT}:preventDefault attribútum érték nélküli megadása egyenértékű a @on{DOM EVENT}:preventDefault="true".

A kifejezés az attribútum megengedett értéke is. Az alábbi példában a shouldPreventDefault egy bool mező, amely true vagy falsevan beállítva:

<input @onkeydown:preventDefault="shouldPreventDefault" />

...

@code {
    private bool shouldPreventDefault = true;
}

Eseménypropagálás leállítása

A @on{DOM EVENT}:stopPropagation direktíva attribútum használatával állítsa le az eseménypropagálást a Blazor hatókörön belül. {DOM EVENT} egy DOM eseményhelyőrzője.

A stopPropagation irányelv attribútumának hatása a Blazor hatókörre korlátozódik, és nem terjed ki a HTML DOM-ra. Az eseményeknek propagálódniuk kell a HTML DOM-gyökérig, mielőtt a Blazor reagálhat rájuk. A HTML DOM-események propagálásának megakadályozására szolgáló mechanizmus esetében fontolja meg a következő megközelítést:

• Az esemény útvonalát a Event.composedPath()meghívásával lehet lekérni.
• A eseménycélok (EventTarget)alapján szűrje az eseményeket.

Az alábbi példában a jelölőnégyzet bejelölésével megakadályozhatja, hogy a <div> második gyermek kattintási eseményei a szülőhöz <div>ne propagálódjanak. Mivel a propagált kattintási események általában aktiválják a OnSelectParentDiv metódust, a második gyermek <div> kiválasztásával megjelenik a szülő <div> üzenet, kivéve, ha a jelölőnégyzet be van jelölve.

EventHandler7.razor:

@page "/event-handler-7"

<PageTitle>Event Handler 7</PageTitle>

<h1>Event Handler Example 7</h1>

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() => 
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() => 
        message = $"The child div was selected. {DateTime.Now}";
}

Elem fókuszba kerülése

Hívja meg a FocusAsync függvényt egy elemhivatkozáson, hogy a kód egy elemére fókuszáljon. Az alábbi példában válassza ki a gombot a <input> elem fókuszba helyezéséhez.

EventHandler8.razor:

@page "/event-handler-8"

<PageTitle>Event Handler 8</PageTitle>

<h1>Event Handler Example 8</h1>

<p>Select the button to give the <code><input></code> focus.</p>

<p>
    <label>
        Input: 
        <input @ref="exampleInput" />
    </label>
    
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}