EventCallback: Komunikasi Anak ke Induk
Penjelasan
EventCallback adalah tipe khusus Blazor untuk membuat Parameter yang bisa dipanggil sebagai "event" dari component anak — setara @Output/EventEmitter Angular atau emit Vue. Dideklarasikan sebagai [Parameter] bertipe EventCallback atau EventCallback<T> (kalau perlu mengirim data), dipicu lewat InvokeAsync().
Contoh Konsep
@* TombolSuka.razor *@
<button @onclick="HandleKlik">Suka</button>
@code {
[Parameter]
public EventCallback<DateTime> OnDisukai { get; set; }
private async Task HandleKlik()
{
await OnDisukai.InvokeAsync(DateTime.Now);
}
}
@* Dipakai di induk: *@
@* <TombolSuka OnDisukai="HandleDisukai" /> *@
@* @code { private void HandleDisukai(DateTime waktu) { ... } } *@Praktikum
Buat component KartuProduk.razor dengan [Parameter] Nama (string) dan EventCallback OnDitambahkan yang dipicu saat tombol "Tambah ke Keranjang" diklik. Tulis contoh pemakaiannya di component induk dengan Nama dan OnDitambahkan.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
InvokeAsync() SELALU dipanggil dengan await, bahkan kalau handler-nya sendiri tidak melakukan operasi async lain — ini WAJIB karena Blazor perlu menunggu semua kemungkinan pekerjaan async di sisi induk (mis. fetch data) selesai sebelum merender ulang UI.