Blogger Jateng
Home / Tutorial

Penanganan Peristiwa di React

Sebagai salah satu library JavaScript yang paling sering digunakan untuk antarmuka pengguna, penanganan event pada React merupakan fitur inti yang harus dikuasai oleh setiap pengembang React. Penanganan event dalam react sangat penting untuk membangun aplikasi web interaktif, karena dengan adanya penanganan event, pengembang dapat merespon aksi pengguna seperti klik, form submit, atau input dari keyboard. 

Memahami Penanganan Peristiwa di React

React menggunakan sistem penanganan event yang mirip dengan penanganan event DOM standar, tetapi dengan beberapa manfaat dan optimasi tambahan. Masalahnya adalah bahwa dalam react, event bersifat sintetis. Lapisan sintetis ini memperkenalkan antarmuka yang seragam dan jaminan perilaku di seluruh browser, untuk kompatibilitas lintas browser yang lebih mudah.

sumber: iltekkomputer.com

Fitur-fitur penting dari React Events

  1. Event Sintetis: React membungkus native event ke dalam SyntheticEvent-nya sendiri. Di sisi lain, Anda dapat mengaksesnya tanpa instalasi pada browser apapun, dengan cara yang sama.
  2. Penamaan camelCase: Jika pada event native DOM kita menulis jenis event seperti onclick, pada React, penangan event ditulis sebagai camelCase. Onclick misalnya pada post di DOM onClick di React.
  3. Pengikatan Event: Di React, event handler terikat pada komponen dimana event handler tersebut didefinisikan, sehingga tidak perlu melakukan binding secara manual pada sebagian besar kasus.

Menambahkan Event Handler di React

Penangan Peristiwa Sebaris (Inline Event Handlers)

Salah satu pendekatan termudah untuk menangani event di React adalah dengan mendefinisikan handler secara inline di JSX. Berikut ini adalah contohnya:

function App() {
  return (
    <button onClick={() => alert('Button clicked!')}>
      Click Me
    </button>
  );
}

Metode sebagai Penangan Peristiwa

Dengan logika yang lebih kompleks, mendefinisikan metode event handler di dalam komponen react adalah hal yang umum dilakukan. Hal ini meningkatkan reusability dan keterbacaan kode.

class App extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    );
  }
}

Event Handler dan Fungsi Panah

Ini adalah pendekatan lain yang populer di React karena fungsi panah mempertahankan konteks ini. Berikut ini adalah contohnya:

class App extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    );
  }
}

Melewatkan Argumen dalam Event Handler

Pada beberapa kasus, Anda perlu mengoper argumen ke event handler. Anda dapat melakukannya dengan menggunakan fungsi panah sebaris: 

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => handleClick('Hello, World!')}>
      Click Me
    </button>
  );
}

Penyatuan Event di React

React sebenarnya mengumpulkan objek-objek SyntheticEvent ini untuk alasan performa. Maksudnya adalah objek event akan digunakan kembali untuk keuntungan performa. Tetapi ini juga berarti bahwa objek event akan dibatalkan setelah event handler berjalan.

Jika Anda menggunakan event untuk operasi asinkronisasi, gunakan event untuk menahannya. persist(): 

 function App() {

  const handleClick = (event) => {

    event.persist();

    setTimeout(() => {

      console.log(event.type); // Works even after a delay

    }, 1000);

  };


  return <button onClick={handleClick}>Click Me</button>;

}

Event yang Umum Digunakan di React

React menyediakan dukungan untuk beberapa event, termasuk tetapi tidak terbatas pada:

  • Kejadian pada mouse: onClick, onDoubleClick, onMouseEnter, onMouseLeave
  • Peristiwa Keyboard: onKeyDown, onKeyPress, onKeyUp
  • Peristiwa Formulir: onChange, onSubmit, onFocus, onBlur
  • Kejadian Sentuh: onTouchStart, onTouchEnd, onTouchMove 

Praktik Terbaik untuk Penanganan Acara

  1. Jaga agar event handler tetap ringan: Hindari menulis logika yang rumit di dalam event handler; sebagai gantinya, gunakan fungsi atau utilitas untuk menyederhanakannya
  2. Tidak ada Logika Sebaris: Logika sebaris memang nyaman, namun menambah kerumitan yang sulit di-debug dan mengganggu keterbacaan.
  3. Mengoptimalkan Kinerja: Gunakan teknik memoisasi seperti useCallback untuk komponen fungsional untuk mencegah render ulang yang tidak perlu.
  4. Penanganan kejadian yang mudah diakses: Pastikan penangan peristiwa Anda dapat digunakan oleh pengguna keyboard dan pembaca layar untuk meningkatkan aksesibilitas.

Kesimpulan

React mutation handler memungkinkan aplikasi Anda untuk bereaksi terhadap perubahan state dan menjaga UI tetap diperbarui. Dengan pengetahuan yang tepat tentang sistem event Reacts dan dengan mengikuti beberapa praktik terbaik, para pengembang dapat membangun aplikasi yang ramah pengguna yang responsif. Dari klik tombol sederhana hingga pengiriman formulir yang kompleks, penanganan event React memungkinkan pengembang untuk membuat antarmuka mereka hidup.