Tutorial React JS #5: Mengenal Event Handling

Setelah mempelajari tentang props dan state pada seri tutorial sebelumnya, sekarang kita akan membahas sedikit tentang event handling dalam ReactJS. Dalam aplikasi web, user akan berinteraksi dengan element-element di dalamnya, seperti button (tombol) atau formulir, dan perlu ada cara untuk menangani interaksi tersebut. Event handling adalah cara untuk menangani interaksi user pada element-element tersebut.

Pengertian Event Handling

Event handling adalah proses menangani action atau interaction yang dilakukan user pada element-element di dalam aplikasi web. Dalam ReactJS, event handling bisa dilakukan dengan menambahkan event listener pada element tersebut.

Menambahkan Event Handler pada Component

Untuk menambahkan event handler pada component, kita perlu membuat function yang akan menangani interaksi user pada element seperti tombol, formulir, dan lain-lain. Kemudian, kita dapat menambahkan event listener pada elemen tersebut dan menghubungkannya dengan function event handler yang sudah dibuat.

Sebagai contoh, kita akan membuat sebuah tombol yang akan menampilkan pesan saat diklik. Pertama, kita buat sebuah function bernama handleClick() yang akan menampilkan pesan di console saat tombol diklik:

function handleClick() {
console.log("Tombol diklik!");
}

Kemudian, kita tambahkan event listener pada element tombol dan hubungkan dengan function handleClick() yang sudah dibuat:

function Button() {
  return <button onClick={handleClick}>Klik saya</button>;
}

Dalam contoh ini, kita menggunakan prop onClick untuk menambahkan event listener pada tombol. Prop ini akan menangkap event click pada tombol dan menjalankan function handleClick().

Contoh Penggunaan Event Handling

Berikut ini adalah contoh lengkap kode untuk penggunaan event handling pada komponen ReactJS:

import React, { useState } from "react";

function Button() {
  const [clicks, setClicks] = useState(0);

  function handleClick() {
    setClicks(clicks + 1);
    console.log("Tombol diklik!");
  }

  return (
    <div>
      <button onClick={handleClick}>Klik saya</button>
      <p>Jumlah klik: {clicks}</p>
    </div>
  );
}

export default Button;

Dalam contoh ini, kita membuat sebuah component Button yang akan menampilkan sebuah tombol. Ketika tombol diklik, function handleClick() akan dijalankan dan menambahkan satu ke variabel clicks menggunakan function setClicks(). Selain itu, function handleClick() juga akan menampilkan pesan di console.

Penanganan Event pada Class Component

Jika kita menggunakan class component, penanganan event dapat dilakukan dengan menggunakan method yang sudah disediakan oleh ReactJS, yaitu this.setState(). Sebagai contoh, kita ingin menambahkan event handler untuk mengubah warna background pada komponen App saat tombol ditekan.

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: 'blue'
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState({ backgroundColor: 'red' });
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.backgroundColor }}>
        <button onClick={this.handleButtonClick}>Ubah Warna</button>
      </div>
    );
  }
}

export default App;

Pada contoh di atas, kita menambahkan method handleButtonClick() yang menggunakan this.setState() untuk memperbarui state backgroundColor menjadi 'red' saat tombol ditekan. Kemudian, pada element <button>, kita menambahkan prop onClick yang mengarah pada method handleButtonClick().