lifelong learner — urip iku urup, currently working on accenture.

React : handling event

0
Degananda.com -

Menghandle suatu event , misalnya user event berupa click sangat diperlukan dalam membuat suatu aplikasi. Terutama jika berhubungan dengan suatu form input. Ulasan ini akan membahas bagaimana melakukan user event handling dengan menggunakan react.

Selayang pandang

React menghandle event menggunakan attribute sama halnya seperti html pada umumnya. Hanya saja terdapat aturan yang khusus pada penggunaan atribut tersebut yakni :

  1. jika pada html biasa event ditulis dengan huruf kecil maka pada react penulisannya menggunakan “camelCase”.
  2. jika pada html kita memberikan expression berupa string yang mengarah pada suatu fungsi tertentu maka pada react memberikan fungsi event handler (bukan berupa string literal yang di apit dengan double quotes (“”).

daftar user event yang umumnya ada pada javascript yaitu :

nama user event penulisan attribute pada react
onclick , saat user mengklik suatu element tertentu onClick
onload, saat user memasuki atau keluar dari halaman onLoad
onchange, saat suatu elemen nilainya berubah onChange
onmouseout, saat cursor keluar dari elemen onMouseout
onmouseover , saat cursor “hover” kedalam elemen onMouseover

Selain kelima user event diatas juga terdapat user event lainnya , silahkan menuju ke dokumentasi javascript(google it :D, masih belum ada konten tersebut di blog ini). Untuk menjelaskan  kedua aturan diatas berikut ini terdapat ilutrasinnya (berupa kode).

Pada html umumnya

<button onclick="sayMyName()">
  Say my name
</button>

Pada react

<button onclick={sayMyName}>
  Say my name
</button>

Membuat event handler pada react

Kita akan membuat suatu event handler yang sederhana yakni dari sebuah button akan menampilkan alert berupa (“hello world”).  pertama-tama kita siapkan terlebih dahulu elemen button tersebut disertai dengan event handler dengan format react seperti pada didatas (tentunnya kita tulis dalam bentuk JSX). Selanjutnya jangan lupa buat fungsi handlernya. Berikut adalah potongan kode untuk implementasi kasus diatas

constructor(props){
  super(props);
  this.testHandler = this.testHandler.bind(this);

}

testHandler(event){
  alert('degananda');
}

render() {
  return (
    <div>
      <button onClick={this.testHandler}>Klik saya dong kakak</button>
    </div>
  );
}

kode di atas akan menghasilkan tampilans seperti dibawah ini

Karena kita menggunakan format penulisan ES6 maka penggunaan bind terhadap event handler tersebut menjadi penting untuk dilakukan.  Tanpa menggunakan bind kita tidak dapat menggunakan callback “this” pada fungsi event handler yang kita buat. Namun pada contoh diatas kita tidak menggunakan “this”.

React melawan default behavior elemen pada browser

Setiap event handler pada react tidak dapat menghindarkan dari “behavior” default dari suatu browser. Contoh diatas tidak melakukan konfrontasi terhadap default behavior dengan browser. Lain halnya jika kita menggunakan elemen “<a href=”#”>” atau link. Biasannya link akan mengarahkan user ke halaman baru. Nah, agar react tidak mengarahkan user ke halaman baru jika kita menggunakan <a herf=”#”> maka tambahkan fungsi preventDefault() gunannya adalah menghilangkan default behavior dari elemen tersebut. Contohnya seperti ini

constructor(props){
  super(props);
  this.testHandler = this.testHandler.bind(this);

}

testHandler(event){
  event.preventDefault();
  alert('degananda');
}

render() {
  return (
    <div>
      <a href="#" onClick={this.testHandler}>Klik saya dong kakak</a>
    </div>
  );
}

kode diatas akan menghasilkan tampilan seperti dibawah ini

parameter e / event (parameter yang ada di fungsi event handler) diatas didefinisikan oleh react sebagai SynteticEvent. Singkatnya fungsi tersebut telah distandarkan dengan W3C tujuannya adalah agar fungsi yang dieksekusi melalui e/event dapat dijalankan pada semua browser (klaim dari react).