penanganan peristiwa ASP.NET Core Blazor

Artikel ini menjelaskan Blazorfitur penanganan peristiwa, termasuk jenis argumen peristiwa, panggilan balik peristiwa, dan mengelola peristiwa browser default.

Mendelegasikan penanganan aktivitas

Tentukan penangan aktivitas delegasi dalam Razor markup komponen dengan @on{DOM EVENT}="{DELEGATE}"Razor sintaks:

• Tempat {DOM EVENT} penampung adalah peristiwa DOM (misalnya, click).
• Tempat {DELEGATE} penampung adalah penanganan aktivitas delegasi C#.

Untuk penanganan peristiwa:

• Mendelegasikan penanganan aktivitas di Blazor Web Apps hanya dipanggil dalam komponen yang mengadopsi mode render interaktif. Contoh di seluruh artikel ini mengasumsikan bahwa aplikasi mengadopsi mode render interaktif secara global di komponen root aplikasi, biasanya App komponen. Untuk informasi selengkapnya, lihat mode render ASP.NET CoreBlazor.
• Penangan aktivitas delegasi asinkron yang mengembalikan Task didukung.
• Mendelegasikan penanganan aktivitas secara otomatis memicu render UI, sehingga tidak perlu memanggil StateHasChangedsecara manual .
• Pengecualian dicatat.

Kode berikut:

• UpdateHeading Memanggil metode ketika tombol dipilih di UI.
• CheckChanged Memanggil metode saat kotak centang diubah di UI.

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 changed at {DateTime.Now}";
    }
}

Dalam contoh berikut, UpdateHeading:

• Dipanggil secara asinkron ketika tombol dipilih.
• Menunggu dua detik sebelum memperbarui judul.

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

Argumen peristiwa bawaan

Untuk peristiwa yang mendukung jenis argumen peristiwa, menentukan parameter peristiwa dalam definisi metode peristiwa hanya diperlukan jika jenis peristiwa digunakan dalam metode . Dalam contoh berikut, MouseEventArgs digunakan dalam ReportPointerLocation metode untuk mengatur teks pesan yang melaporkan koordinat mouse saat pengguna memilih tombol di UI.

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

Didukung EventArgs diperlihatkan dalam tabel berikut.

Kejadian	Kelas	Catatan DOM
Clipboard	ClipboardEventArgs
Drag	DragEventArgs	DataTransfer dan DataTransferItem tahan data item yang diseret. Terapkan seret dan letakkan aplikasi Blazor menggunakan JS interop dengan HTML Drag and Drop API.
Kesalahan	ErrorEventArgs
Kejadian	EventArgs	EventHandlers menyimpan atribut untuk mengonfigurasi pemetaan antara nama peristiwa dan jenis argumen peristiwa.
Fokus	FocusEventArgs	Tidak menyertakan dukungan untuk relatedTarget.
Input	ChangeEventArgs
Keyboard	KeyboardEventArgs
Mouse	MouseEventArgs
Penunjuk mouse	PointerEventArgs
Roda mouse	WheelEventArgs
Progres	ProgressEventArgs
Sentuh	TouchEventArgs	TouchPoint mewakili satu titik kontak pada perangkat sensitif sentuhan.

Untuk informasi selengkapnya, lihat sumber daya berikut:

• EventArgs kelas di sumber referensi ASP.NET Core (cabang dotnet/aspnetcore main )

  Catatan

  Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

• EventHandlers menyimpan atribut untuk mengonfigurasi pemetaan antara nama peristiwa dan jenis argumen peristiwa.

Argumen peristiwa kustom

Blazor mendukung argumen peristiwa kustom, yang memungkinkan Anda meneruskan data arbitrer ke penanganan aktivitas .NET dengan peristiwa kustom.

Konfigurasi umum

Peristiwa kustom dengan argumen peristiwa kustom umumnya diaktifkan dengan langkah-langkah berikut.

Di JavaScript, tentukan fungsi untuk membuat objek argumen peristiwa kustom dari peristiwa sumber:

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

Parameternya event adalah Peristiwa DOM (dokumentasi MDN).

Daftarkan peristiwa kustom dengan handler sebelumnya di penginisialisasi JavaScript. Berikan nama peristiwa browser yang sesuai ke browserEventName, yang untuk contoh yang ditunjukkan di bagian ini adalah click untuk pilihan tombol di UI.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js{PACKAGE ID/ASSEMBLY NAME}(tempat penampung adalah ID paket atau nama rakitan aplikasi):

Blazor Untuk Aplikasi Web:

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

Untuk aplikasi Blazor Server atau Blazor WebAssembly :

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

Catatan

Panggilan ke registerCustomEventType dilakukan dalam skrip hanya sekali per peristiwa.

Untuk panggilan ke registerCustomEventType, gunakan blazor parameter (huruf bkecil) yang disediakan oleh Blazor peristiwa mulai. Meskipun pendaftaran valid saat menggunakan Blazor objek (huruf Bbesar ), pendekatan yang disukai adalah menggunakan parameter .

Tentukan kelas untuk argumen peristiwa:

namespace BlazorSample.CustomEvents;

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

Kawat peristiwa kustom dengan argumen peristiwa dengan menambahkan anotasi [EventHandler] atribut untuk peristiwa kustom:

• Agar pengkompilasi menemukan [EventHandler] kelas , itu harus ditempatkan ke dalam file kelas C# (.cs), menjadikannya kelas tingkat atas normal.
• Tandai kelas public.
• Kelas tidak memerlukan anggota.
• Kelas harus disebut "EventHandlers" agar dapat ditemukan oleh pengkompilasiRazor.
• Tempatkan kelas di bawah namespace khusus untuk aplikasi Anda.
• Impor namespace ke Razor komponen (.razor) tempat peristiwa digunakan.

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

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

Daftarkan penanganan aktivitas pada satu atau beberapa elemen HTML. Akses data yang diteruskan dari JavaScript dalam metode penangan delegasi:

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

@oncustomevent Jika atribut tidak dikenali oleh IntelliSense, pastikan komponen atau _Imports.razor file berisi @using pernyataan untuk namespace yang berisi EventHandler kelas .

Setiap kali peristiwa kustom diaktifkan di DOM, penanganan aktivitas dipanggil dengan data yang diteruskan dari JavaScript.

Jika Anda mencoba mengaktifkan peristiwa kustom, bubbles harus diaktifkan dengan mengatur nilainya ke true. Jika tidak, peristiwa tidak mencapai Blazor handler untuk diproses ke kelas atribut kustom [EventHandler] C#. Untuk informasi selengkapnya, lihat Dokumen Web MDN: Gelembung peristiwa.

Contoh peristiwa tempel clipboard kustom

Contoh berikut menerima peristiwa tempel clipboard kustom yang menyertakan waktu tempel dan teks yang ditempelkan pengguna.

Deklarasikan nama kustom (oncustompaste) untuk peristiwa dan kelas .NET (CustomPasteEventArgs) untuk menyimpan argumen peristiwa untuk peristiwa ini:

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; }
}

Tambahkan kode JavaScript untuk menyediakan data untuk EventArgs subkelas dengan handler sebelumnya di penginisialisasi JavaScript. Contoh berikut hanya menangani penempelan teks, tetapi Anda dapat menggunakan API JavaScript arbitrer untuk menangani pengguna yang menempelkan jenis data lain, seperti gambar.

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

Blazor Untuk Aplikasi Web:

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

Untuk aplikasi Blazor Server atau Blazor WebAssembly :

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

Dalam contoh sebelumnya, {PACKAGE ID/ASSEMBLY NAME} tempat penampung nama file mewakili ID paket atau nama rakitan aplikasi.

Catatan

Untuk panggilan ke registerCustomEventType, gunakan blazor parameter (huruf bkecil) yang disediakan oleh Blazor peristiwa mulai. Meskipun pendaftaran valid saat menggunakan Blazor objek (huruf Bbesar ), pendekatan yang disukai adalah menggunakan parameter .

Kode sebelumnya memberi tahu browser bahwa ketika peristiwa asli paste terjadi:

• Ajukan custompaste acara.
• Berikan data argumen peristiwa menggunakan logika kustom yang dinyatakan:
  • eventTimestampUntuk , buat tanggal baru.
  • pastedDataUntuk , dapatkan data clipboard sebagai teks. Untuk informasi selengkapnya, lihat MDN Web Docs: ClipboardEvent.clipboardData.

Konvensi nama peristiwa berbeda antara .NET dan JavaScript:

• Di .NET, nama peristiwa diawali dengan "on".
• Di JavaScript, nama peristiwa tidak memiliki awalan.

Razor Dalam komponen, lampirkan handler kustom ke elemen .

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

Ekspresi Lambda

Ekspresi Lambda didukung sebagai penangan aktivitas delegasi.

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

Seringkali lebih mudah untuk menutup nilai tambahan menggunakan parameter metode C#, seperti saat melakukan iterasi pada sekumpulan elemen. Contoh berikut membuat tiga tombol, yang masing-masing memanggil UpdateHeading dan meneruskan data berikut:

• Argumen peristiwa (MouseEventArgs) di e.
• Nomor tombol di buttonNumber.

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

Membuat sejumlah besar delegasi peristiwa dalam perulangan dapat menyebabkan performa penyajian yang buruk. Untuk informasi selengkapnya, lihat praktik terbaik performa inti Blazor ASP.NET.

Hindari menggunakan variabel loop langsung dalam ekspresi lambda, seperti i dalam contoh perulangan sebelumnya for . Jika tidak, variabel yang sama digunakan oleh semua ekspresi lambda, yang menghasilkan penggunaan nilai yang sama di semua lambda. Ambil nilai variabel dalam variabel lokal. Dalam contoh sebelumnya:

• Variabel i perulangan ditetapkan ke buttonNumber.
• buttonNumber digunakan dalam ekspresi lambda.

Atau, gunakan perulangan foreach dengan Enumerable.Range, yang tidak menderita masalah sebelumnya:

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

EventCallback

Skenario umum dengan komponen berlapis adalah menjalankan metode dalam komponen induk saat peristiwa komponen anak terjadi. Peristiwa onclick yang terjadi pada komponen anak adalah kasus penggunaan umum. Untuk mengekspos peristiwa di seluruh komponen, gunakan EventCallback. Komponen induk dapat menetapkan metode panggilan balik ke komponen EventCallbackanak .

Komponen berikut Child menunjukkan bagaimana handler tombol onclick disiapkan untuk menerima EventCallback delegasi dari sampel ParentComponent. dititik EventCallback dengan MouseEventArgs, yang sesuai untuk onclick peristiwa dari perangkat periferal.

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; }
}

Komponen Parent mengatur (OnClickCallback) anak EventCallback<TValue> ke metodenyaShowMessage.

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

Saat tombol dipilih di ChildComponent:

• Metode Parent komponen ShowMessage dipanggil. message diperbarui dan ditampilkan dalam Parent komponen.
• Panggilan ke StateHasChanged tidak diperlukan dalam metode panggilan balik (ShowMessage). StateHasChanged dipanggil secara otomatis untuk merender Parent komponen, sama seperti peristiwa anak yang memicu penyajian komponen di penanganan aktivitas yang dijalankan dalam anak. Untuk informasi lebih lanjut, lihat perenderan komponen Razor ASP.NET Core.

Gunakan EventCallback dan EventCallback<TValue> untuk penanganan peristiwa dan parameter komponen pengikatan.

Lebih suka yang ditik EventCallback<TValue> dengan kuat daripada EventCallback. EventCallback<TValue> memberikan umpan balik kesalahan yang ditingkatkan ketika jenis yang tidak pantas digunakan, memandu pengguna komponen menuju implementasi yang benar. Mirip dengan penanganan aktivitas UI lainnya, menentukan parameter peristiwa bersifat opsional. Gunakan EventCallback saat tidak ada nilai yang diteruskan ke panggilan balik.

EventCallback dan EventCallback<TValue> mengizinkan delegasi asinkron. EventCallback ditik dengan lemah dan memungkinkan melewati argumen jenis apa pun di InvokeAsync(Object). EventCallback<TValue> sangat ditik dan memerlukan melewati T argumen dalam InvokeAsync(T) yang dapat ditetapkan ke TValue.

Panggil EventCallback atau EventCallback<TValue> dengan InvokeAsync dan tunggu Task:

await OnClickCallback.InvokeAsync({ARGUMENT});

Dalam contoh sebelumnya, {ARGUMENT} tempat penampung adalah argumen opsional.

Contoh induk-anak berikut menunjukkan teknik.

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;
}

Kejadian kedua Child2 komponen menunjukkan panggilan balik asinkron, dan nilai baru message2 ditetapkan dan dirender dengan penundaan dua detik.

Mencegah tindakan default

Gunakan atribut direktif @on{DOM EVENT}:preventDefault untuk mencegah tindakan default untuk peristiwa, di mana {DOM EVENT} tempat penampung adalah peristiwa DOM.

Saat kunci dipilih pada perangkat input dan fokus elemen ada pada kotak teks, browser biasanya menampilkan karakter kunci dalam kotak teks. Dalam contoh berikut, perilaku default dicegah dengan menentukan atribut direktif @onkeydown:preventDefault . Ketika fokus ada pada <input> elemen , penghitung naik dengan urutan kunci Shift++. Karakter + tidak ditetapkan ke <input> nilai elemen. Untuk informasi selengkapnya tentang keydown, lihat MDN Web Docs: Document: keydown peristiwa.

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++;
        }
    }
}

@on{DOM EVENT}:preventDefault Menentukan atribut tanpa nilai setara dengan @on{DOM EVENT}:preventDefault="true".

Ekspresi juga merupakan nilai atribut yang diizinkan. Dalam contoh berikut, shouldPreventDefault adalah bidang yang bool diatur ke atau truefalse:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Menghentikan penyebaran peristiwa

Gunakan atribut direktif @on{DOM EVENT}:stopPropagation untuk menghentikan penyebaran peristiwa dalam Blazor cakupan. {DOM EVENT} adalah tempat penampung untuk peristiwa DOM.

Efek stopPropagation atribut direktif terbatas pada Blazor cakupan dan tidak meluas ke HTML DOM. Peristiwa harus disebarluaskan ke root HTML DOM sebelum Blazor dapat bertindak atasnya. Untuk mekanisme untuk mencegah penyebaran peristiwa HTML DOM, pertimbangkan pendekatan berikut:

• Dapatkan jalur peristiwa dengan memanggil Event.composedPath().
• Memfilter peristiwa berdasarkan target peristiwa yang disusam (EventTarget).

Dalam contoh berikut, memilih kotak centang mencegah peristiwa klik dari anak <div> kedua menyebar ke induk <div>. Karena peristiwa klik yang disebarkan biasanya mengaktifkan OnSelectParentDiv metode , memilih anak kedua <div> menghasilkan pesan induk <div> muncul kecuali kotak centang dipilih.

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

Memfokuskan elemen

Panggil FocusAsync referensi elemen untuk memfokuskan elemen dalam kode. Dalam contoh berikut, pilih tombol untuk memfokuskan <input> elemen.

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();
    }
}