Tutorial ReactJS #5 : Event Handling pada ReactJs

Penanganan event (event handling) adalah bagian penting dalam pengembangan aplikasi ReactJS. Ini memungkinkan Anda merespons tindakan pengguna seperti mengklik tombol, mengisi formulir, atau menavigasi halaman web.

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/button, formulir, dan lain-lain. Kemudian, kita dapat menambahkan event listener pada elemen tersebut dan menghubungkannya dengan function event handler yang sudah dibuat.

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!");
}

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

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

Pada 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 dengan kode lengkap untuk penggunaan event handling pada komponen ReactJS, buat file baru dalam folder components misal dengan nama Event-handling.js, dengan sintak seperti berikut :

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 1 ke variabel clicks menggunakan function setClicks(). Selain itu, function handleClick() juga akan menampilkan pesan di console.

Selanjutnya panggil fungsi Button dalam file Event-handling.js oleh file App.js, sehingga sintak App.js menjadi seperti berikut :

import logo from './logo.svg';
import './App.css';
import Button from './components/Event-handling';

function App() {
    return (
      <div className="App">
        <Button/>
      </div>
    );
  }

export default App;

Hasilnya seperti berikut :

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.

Untuk contoh, ubah file App.js menjadi seperti berikut :

import React, { Component } from 'react';

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

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

export default App;

Hasilnya :

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

Demikian tutorial tentang Event Handling pada ReactJs, selanjutnya kita akan mempelajari tentang React Router. Semoga bermanfaat, jika ada pertanyaan silahkan tulis di kolom komentar. Terima kasih.