React Event

Pengertian Event dan Event Handler

• Dalam JavaScript, event adalah suatu hal yang bisa di lakukan ke element
HTML, seperti di click, di double click, di hover (meletakkan cursor mouse di
atasnya), dll.
• Untuk setiap event, kita bisa membuat sebuah event handler, yakni kode
program yang dijalankan saat event itu terjadi. Misal ketika sebuah tombol di
klik, tampilkan sebuah pesan.
• Atau ketika inputan form diubah, sembunyikan gambar, dst.
• Event dan event handler inilah yang membuat efek interaktif ke sebuah
halaman web.
• Di React,event menjadi fitur yang sangat penting karena dengan event-lah
aplikasi web menjadi reactive
Event Handler di Class Component
• Sama di JavaScript biasa,
event handler di React juga
bisa ditulis dalam bentuk
inline (langsung ke dalam
atribut HTML).
• Berikut contoh
penulisannya:
• Di baris 23 saya membuat
tag <button> dengan sebuah
atribut event onClick.
• Atribut ini berisi inline
function () => alert("Hello
React").
• Maka ketika tombol di klik,
akan tampil jendela alert
dengan teks "Hello React"
Event Handler di Class Component
Event Handler di
Class Component
Selain menulis langsung secara
inline, kode untuk event handler
juga bisa dipisah menjadi sebuah
method di dalam class
component:
Event Handler di
Class Component
• Sekarang di baris 28 atribut
onClick berisi nilai
this.handleButtonClick.
• Ini merujuk ke sebuah method
handleButtonClick() yang ada
di baris 20-25.
• Artinya ketika event click
terjadi, jalankan method
handleButtonClick().
Event Handler di Class Component
• Method handleButtonClick() bertindak sebagai event handler method, dan
kita bebas memberikan nama apa saja.
• Sepanjang saya mempelajari React, terdapat 2 saran pemberian nama
untuk event handler method, yakni salah satu dari:
• handle<Sesuatu><Nama_event>, contoh: handleButtonClick(),
handleFormSubmit(), atau handleMahasiswaDelete()
• <sesuatu><Nama_event>Handler, contoh: buttonClickHandler(),
formSubmitHandler(), atau mahasiswaDeleteHandler()
• Cara penulisan ini tidak wajib, lebih ke saran agar mudah membedakan
dengan methodmethod lain yang nantinya ada di dalam React component.
• Event juga bisa ditempatkan terpisah ke setiap komponen
Event Handler di
Class Component
• Silahkan pelajari sebentar
kode berikut:
• Hasil dari kode ini masih
sama seperti contoh kita
sebelumnya.
• Namun sekarang saya
membuat komponen
Tombol terpisah yang akan
akan diakses dari komponen
MyApp
Event Binding
• Di dalam method
event handler, kita
bisa menjalankan kode
JavaScript apapun.
• Yang cukup sering
dilakukan adalah
mengirim data sebagai
props, lalu diproses
oleh event handler
seperti contoh berikut
Event Binding
• Tips untuk memahami
kode yang cukup panjang
seperti ini adalah mulai
dari method
ReactDOM.createRoot().re
nder() untuk mengetahui
apa komponen yang akan
di render.
• Dalam contoh di atas,
komponen tersebut adalah
<MyApp />
Event Binding
• Di dalam struktur JSX
komponen MyApp, terdapat
satu tag <h1> dan dua buah
tag <Tombol/>.
• Karena diawali dengan huruf
besar, maka tag <Tombol/>
ini tidak lain berbentuk
React component.
• Selain itu terdapat atribut
pesan yang ikut dikirim ke
dalam komponen Tombol
Event Binding
• Pendefinisian komponen Tombol ada di
baris 18 – 30.
• Untuk komponen yang memiliki beberapa
method, sebaiknya baca dari method
render() terlebih dahulu, lalu baru masuk
ke method-method lain saat ada perintah
yang mengaksesnya.
• Di dalam method render() milik
komponen Tombol, terdapat struktur JSX
dengan tag <button>.
• Atribut onClick akan mengakses method
handleButtonClick() yang berisi perintah
alert(this.props.pesan).
• Artinya pada saat <button> di klik, akan
tampil jendela alert yang menampilkan
teks dari props pesan
Event Binding
• Atribut lain yang ada di tag
<button> adalah style untuk
membuat ruang margin
sebesar 10px.
• Di antara tag pembuka
<button> dan penutup
</button> juga terdapat
perintah this.props.children.
• Maka nilai ini akan berasal dari
teks yang ada di antara tag
pembuka dan penutup
<Tombol>.
Event Binding
• Saat di klik salah satu
button maka akan
muncul error
 Event Binding
• Ternyata tidak tampil apa-apa. Dan
begitu tab console di buka, terlihat
pesan Error: Uncaught TypeError:
Cannot read properties of
undefined (reading 'props'). Error ini
merujuk ke baris 3 dengan alasan
this tidak terdefinisi.
• Masalah ini terjadi karena prinsip
kerja JavaScript dimana jika kita
memanggil method tanpa tambahan
tanda kurung seperti di atribut
onClick={this.handleButtonClick},
maka method ini harus di binding
secara manual.
• Jika tidak, this tidak terdefinisi.
• Dan karena this tidak ada, maka kita
juga tidak bisa mengakses props dari
dalam event handler
 Event Binding (1)
• Terdapat beberapa
solusi dari masalah ini.
• Pertama, kita bisa
men-binding "this"
pada saat menulis
atribut event, yakni
dengan mengubah
baris 26 menjadi
sebagai berikut:
 Event Binding(2)
• Cara kedua adalah
dengan mengubah
nilai atribut event
menjadi pemanggilan
fungsi:
 Event Binding (2)
• Kali ini kita tidak perlu
menggunakan method bind(),
cukup menulis nilai atribut
event dengan arrow notation.
• Dalam kebanyakan kasus, kedua
cara ini bisa dipakai.
• Akan tetapi ada sedikit
kelemahan, yakni setiap kali
komponen di-render, React
akan membuat ulang method
handleButtonClick().
• Penjelasan dari efek ini akan
lebih pas saat kita masuk ke
materi tentang state, tapi intinya
ada sedikit pengurangan
performa untuk kode yang
kompleks.
Event Binding (3)
• Solusi lain untuk
menghindari efek
performa ini
adalah dengan
men-bind "this"
dari dalam
constructor:
Event Binding (3)
• Dengan teknik ini,
kita tetap menulis
isi event onClick di
baris 28 dengan
cara biasa. Proses
• binding "this" akan
dilakukan dari
dalam constructor,
tepatnya di baris
19.
Event Binding
• Cara binding lewat
constructor memang tidak
mengalami pengurangan
performa seperti dua solusi
pertama, tapi kode kita
sedikit lebih panjang.
• Alternatif solusi yang
menurut saya lebih praktis
adalah menggunakan teknik
public class fields syntax.
• Caranya, tulis method event
handler dengan format
arrow notation:
Event Binding
• Sekilas tidak ada tampak perubahan, tapi sebelumnya method
handleButtonClick() di baris 24 - 26 saya tulis dengan kode
berikut:
• handleButtonClick() {
• alert(this.props.pesan);
•}
• Sekarang dimodifikasi dalam bentuk arrow notation:
• handleButtonClick = () => {
• alert(this.props.pesan);
•}
Event Object
• Di dalam JavaScript, kita juga mengenal tentang event object, yakni
object yang berisi informasi detail tentang event yang sedang terjadi.
• Misalnya ketika sebuah tombol di klik, JavaScript otomatis mengirim
event object ke dalam event handler.
• Dari event object, kita bisa mengakses berbagai informasi seperti
posisi klik, waktu klik terjadi, hingga node object tempat klik
berlangsung
Event Object
• Berikut potongan
kode program
yang
menampilkan
event object di
JavaScript native:
Event Object
• Di dalam kode HTML, terdapat tag <h1> dengan id="judul" (baris 3).
Masuk ke kode JavaScript, variabel h1Node akan diisi node object
hasil dari document.GetElementById("judul"), ini tidak lain merujuk ke
tag <h1> tadi.
• Kemudian saya menambah event click beserta event handler ke
h1Node (baris 16-18).
• Parameter event akan diisi oleh JavaScript dengan event object yang
selanjutnya ditampilkan dari perintah console.log(event).
Event Object
• Berikut hasil
yang tampil saat
tag <h1> di klik:
Event Object
• Di dalam tab console,
terlihat berbagai info
miliki event object.
• Salah satu yang sering
diakses adalah
property target karena
menyimpan node
object tempat event
sedang berlangsung:
Event Object
• Dengan perubahan di baris 8, sekarang ketika tag <h1> di klik akan
tampil hasil berikut:

• Menggunakan event object, kita bisa membuat event handler yang

dinamis, tidak terpaku untuk satu element saja
Event Object
• Kembali ke React, kita
juga bisa
"menangkap" event
object di dalam event
handler dengan cara
yang sama seperti
JavaScript native,
yakni melalui
perameter.
• Berikut contohnya:
Event Object
• Kode untuk komponen MyApp dan method render() milik komponen Tombol
masih sama seperti sebelumnya.
• Yang berubah ada di method handleButtonClick() antara baris 16-20.
• Method handleButtonClick() sekarang menerima satu parameter, yakni: event.
• Parameter event otomatis diisi React dengan synthetic events object.
• Disebut sebagai synthetic karena ini bukanlah event object yang sama seperti
di JavaScript native, tapi di-generate sendiri oleh React untuk menghindari
perbedaan implementasi antar web browser.
• Meskipun berbeda, mayoritas property synthetic events object tetap sama
seperti event object biasa.
Event Object
• Di dalam method handleButtonClick() memeriksa 3 nilai
menggunakan console.log():
• event: Berisi synthetic events object tempat event terjadi.
• event.target: Berisi node object tempat event terjadi.
• event.target.innerHTML: Berisi isi teks yang ada di element tempat event
terjadi.
Event Object
• Silahkan jalankan kode di atas, lalu klik tombol "React" dan cek tab
Console :
Event Object
• Hasil dari console.log(event) tampil sebagai SyntheticBaseEvent.
Object ini punya berbagai property yang mayoritas sama seperti milik
event object biasa.
• Salah satu property yang sering dipakai adalah event.target.
• Property ini berisi node objecttempat event berlangsung. Karena saya
men-klik tombol React, maka event.target akan berisi node object
dari tag <button style="margin: 10px;">React</button>.
Event Object
• Lebih spesifik lagi, event.target.innerHTML akan mengembalikan isi
teks yang ada di antara tag pembuka dan penutup milik object tempat
event berlangsung.
• Kembali, teks "React" tampil karena saya men-klik tombol React.
• Sekarang silahkan klik tombol "JavaScript", maka isi dari event object,
event.target, dan event.target.innerHTML juga akan berubah.
Menurunkan (Passing
Down) Event Handler
• Dalam kondisi tertentu, kita
ingin event yang terjadi di
child component, bisa
menjalankan event handler
milik parent component.
Berikut contoh kode yang
dimaksud:
Menurunkan (Passing
Down) Event Handler
• Dalam class MyApp terdapat method
handleClick() di baris 27-28 yang berisi
1 perintah untuk menampilkan
jendela alert("Alert dari MyApp").
• Kemudian di dalam method render(),
saya mengakses komponen Tombol
dengan tambahan atribut
onTombolClick={this.handleClick}.
• Perhatikan bahwa props yang di kirim
adalah suatu method, bukan teks
biasa.
• Nilai this.handleClick merujuk ke
method handleClick() yang ada di
komponen MyApp.
Menurunkan (Passing Down) Event Handler
• Sesampainya di dalam komponen Tombol, property
this.props.onTombolClick saya isi ke dalam event onClick di baris 21.
• Bisakah anda tebak apa yang terjadi saat tombol di klik? Betul, itu
akan menjalankan method handleClick() milik komponen MyApp:
Menurunkan (Passing Down) Event Handler
• Inilah yang dimaksud dengan passing down atau menurunkan event
handler dari parent ke child component.
• Dengan cara ini, kita bisa menjalankan method milik parent
component, meskipun event-nya ditulis dalam child component.
Menurunkan (Passing Down) Event Handler
• Catatan
• Dalam contoh di atas saya menulis atribut
onTombolClick={this.handleClick}.
• Di sini, onTombolClick bukanlah event, tapi hanya nama atribut biasa.
• Kita bebas menggantinya dengan nama lain karena hanya berfungsi
sebagai nama props.
• Akan tetapi kebiasaan sebagian programmer React, jika yang dikirim
sebagai props itu berisi event handler, maka awali dengan kata "on",
seperti onGambarClick, atau onItemClick.
• Ini agar mudah membedakan dengan nama props biasa yang berisi teks.
Event Handler di Functional Component
• Selesai dengan penulisan event handler di class component, sekarang
kita masuk ke cara penulisan event handler di functional component.
• Untungnya, ini lebih mudah karena di functional component kita
tidak mengalami masalah dengan proses binding "this" seperti di class
component.
Event Handler di
Functional Component

• Berikut contoh
pembuatan event dan
event handler di
functional component
React:
Event Handler di Functional Component
• Di dalam function component, event handler ditulis sebagai fungsi
biasa. Dalam contoh di atas,fungsi handleButtonClick() di baris 20-22
bertindak sebagai event handler untuk komponen Tombol.
• Sisa kode lain mirip seperti contoh sebelumnya sehingga tidak akan
saya bahas lagi.
• Di function component kita juga tidak perlu berurusan dengan proses
binding karena tidak butuh perintah "this" ketika mengakses props.
Latihan
• Event handler di functional component juga bisa menerima event
object. Caranya juga sama seperti class component, yakni diinput
sebagai parameter ke dalam event handler.
• Hal yang sama juga berlaku untuk proses passing down event handler
yang kurang lebih sama seperti di class component.
• Sebagai latihan, bisakah anda mengkonversi contoh kode program di
kedua materi tersebut ke versi functional component? Contoh kode
tersebut ada di file
• event_object.html (ppt hal 29 ) dan event_passing_down.html (ppt
hal 36) (ada di beberapa halaman sebelumnya).