Blazor

Event Handling di Blazor

Penjelasan

Blazor menangani event lewat atribut @onNamaEvent (mis. @onclick, @onsubmit, @onchange) diisi nama method C# atau ekspresi lambda inline. Method event handler bisa menerima parameter khusus (mis. MouseEventArgs) kalau butuh detail event-nya, atau tanpa parameter sama sekali kalau tidak perlu.

Contoh Konsep

<button @onclick="HandleKlik">Klik Aku</button>
<button @onclick="() => jumlahKlikLambda++">Klik Lambda</button>

<p>@pesan (jumlah klik lambda: @jumlahKlikLambda)</p>

@code {
    private string pesan = "";
    private int jumlahKlikLambda = 0;

    private void HandleKlik()
    {
        pesan = "Tombol diklik!";
    }
}

Praktikum

Buat method HandleKlik() yang mengubah properti string pesan jadi "Tombol ditekan!". Panggil method itu dari @onclick sebuah tombol, tampilkan nilai pesan di bawahnya.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Method event handler yang mengubah properti C# TIDAK perlu memanggil apa pun secara eksplisit untuk merender ulang UI (beda dengan React setState()) — Blazor OTOMATIS mendeteksi selesainya event handler dan me-render ulang component itu, konvensi ini disebut UI event lifecycle bawaan Blazor.

← Kembali Data Binding dengan @bind Lanjutkan → Parameters: Mengirim Data ke Component Anak