Belajar React Dasar #6: Event Handling

• Apa Itu Event Handling?
• Event onClick
• Event onChange (Input)
• Event onSubmit (Form)
• Event dengan Parameter
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang State & useState, bagaimana cara menyimpan data di dalam component, mengubah nilainya, dan menampilkan ulang di UI.

Pada artikel kali ini, kita akan membahas tentang Event Handling di React. Dengan event handling, kita bisa merespons interaksi pengguna seperti klik tombol, mengetik di input, mengirim form, dan berbagai aksi lainnya.

Apa Itu Event Handling?

Event Handling adalah cara untuk menangani sebuah aksi atau interaksi yang dilakukan pengguna terhadap elemen di UI.

Contoh event yang sering digunakan di React:

• onClick → saat elemen diklik.
• onChange → saat nilai input berubah.
• onSubmit → saat form dikirim.
• onMouseEnter → saat kursor diarahkan ke elemen.
• onKeyDown → saat tombol keyboard ditekan.

React menggunakan camelCase untuk penamaan event, berbeda dengan HTML biasa yang menggunakan huruf kecil.

Event onClick

Mari kita buat contoh event klik tombol.

function App() {
  const handleClick = () => {
    alert("Tombol diklik!");
  };

  return (
    <div>
      <button onClick={handleClick}>Klik Saya</button>
    </div>
  );
}

export default App;

Penjelasan:

• Kita buat fungsi handleClick.
• Fungsi tersebut dipanggil ketika tombol diklik menggunakan onClick.

Event onChange (Input)

Event onChange digunakan untuk menangani perubahan nilai pada input.

import { useState } from "react";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" placeholder="Ketik nama..." onChange={handleChange} />
      <p>Halo, {name}</p>
    </div>
  );
}

export default App;

Penjelasan:

• Kita menggunakan state name untuk menyimpan nilai input.
• Saat pengguna mengetik, event onChange menangkap nilainya melalui event.target.value.
• Nilai tersebut disimpan ke state dan langsung ditampilkan di UI.

Event onSubmit (Form)

Form biasanya menggunakan event onSubmit untuk menangani proses pengiriman data.

import { useState } from "react";

function App() {
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault(); // mencegah reload halaman
    alert(`Email dikirim: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Masukkan email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Kirim</button>
    </form>
  );
}

export default App;

Penjelasan:

• Fungsi handleSubmit dipanggil saat tombol submit ditekan.
• event.preventDefault() digunakan untuk mencegah perilaku default form yang me-refresh halaman.
• Nilai input email diambil dari state.

Event dengan Parameter

Kadang kita butuh mengirim parameter ke fungsi event.

function App() {
  const sayHello = (name) => {
    alert(`Halo, ${name}!`);
  };

  return (
    <div>
      <button onClick={() => sayHello("Budi")}>Sapa Budi</button>
      <button onClick={() => sayHello("Siti")}>Sapa Siti</button>
    </div>
  );
}

export default App;

Penjelasan:

• Kita menggunakan arrow function di dalam onClick agar bisa mengirim parameter ke fungsi sayHello.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Event Handling di React. Kita sudah mencoba event onClick, onChange, onSubmit, hingga event dengan parameter.

Di artikel berikutnya, kita akan membahas tentang Conditional Rendering, yaitu cara menampilkan UI secara dinamis berdasarkan kondisi tertentu.

Terima kasih