Menangani Input Form dengan onChange di React Tanpa Ribet

Kenapa Perlu Menangani Input dengan onChange?

Dalam aplikasi web, input form adalah salah satu komponen paling penting untuk menangani interaksi pengguna. Mulai dari formulir login, registrasi, pencarian, hingga checkout, semuanya butuh input form.

Di React, kita bisa menangani input dengan onChange, yaitu event handler yang akan dipanggil setiap kali ada perubahan pada input. Tanpa onChange, input tidak bisa berfungsi dengan baik dalam React!

Artikel ini akan membahas cara menangani onChange di React dengan berbagai teknik yang optimal.

1. Bagaimana Cara Kerja onChange di React?

Event onChange dipanggil setiap kali ada perubahan dalam elemen input, seperti text, checkbox, radio button, dan textarea.

Sintaks dasar:

<input type="text" onChange={handleChange} />

Di React, kita harus menggunakan state untuk menyimpan nilai input dan mengupdate state tersebut saat event onChange dipanggil.

2. Menangani Input dengan useState()

Cara paling sederhana menangani input adalah dengan useState().

📌 Contoh Input dengan useState()

import React, { useState } from 'react';

function InputField() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} placeholder="Masukkan teks" />
      <p>Hasil Input: {text}</p>
    </div>
  );
}

export default InputField;

📌 Penjelasan:

• useState('') → Menyimpan nilai input dalam state.
• onChange={handleChange} → Menangkap perubahan input.
• event.target.value → Mengambil nilai terbaru dari input dan menyimpannya ke state.

✅ Kelebihan:

• Simpel dan mudah digunakan untuk satu input.
• Tidak butuh library tambahan.

❌ Kekurangan:

• Jika form memiliki banyak input, kode bisa jadi panjang dan kurang rapi.

3. Menangani Banyak Input dalam Satu State

Kalau ada banyak input dalam satu form, lebih baik gunakan satu state berbentuk objek daripada banyak useState().

📌 Contoh Form dengan Banyak Input

import React, { useState } from 'react';

function UserForm() {
  const [form, setForm] = useState({ name: '', email: '' });

  function handleChange(event) {
    const { name, value } = event.target;
    setForm({ ...form, [name]: value });
  }

  return (
    <div>
      <input type="text" name="name" value={form.name} onChange={handleChange} placeholder="Nama" />
      <input type="email" name="email" value={form.email} onChange={handleChange} placeholder="Email" />
      <p>Nama: {form.name}, Email: {form.email}</p>
    </div>
  );
}

export default UserForm;

📌 Penjelasan:

• State berbentuk objek untuk menyimpan banyak nilai input.
• Menggunakan name dari input sebagai key dalam objek state.
• Spread operator (...form) untuk mempertahankan nilai lama saat state diperbarui.

✅ Kelebihan:

• Lebih rapi dibandingkan membuat useState() terpisah untuk setiap input.
• Mudah diperluas jika ada banyak field.

4. Menangani Checkbox dan Radio Button

Untuk checkbox dan radio button, kita perlu menangani event onChange dengan cara yang sedikit berbeda.

📌 Contoh Checkbox dengan useState()

import React, { useState } from 'react';

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  function handleChange(event) {
    setIsChecked(event.target.checked);
  }

  return (
    <div>
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleChange} />
        Saya Setuju
      </label>
      <p>Status: {isChecked ? 'Setuju' : 'Tidak Setuju'}</p>
    </div>
  );
}

export default CheckboxExample;

📌 Penjelasan:

• Gunakan event.target.checked untuk mendapatkan nilai checkbox.
• Gunakan checked={isChecked} agar React mengontrol nilai checkbox.

5. Menangani Form dengan useReducer()

Kalau form sudah cukup kompleks, kita bisa gunakan useReducer() untuk mengelola state form dengan lebih terstruktur.

📌 Contoh Form dengan useReducer()

import React, { useReducer } from 'react';

const initialState = { name: '', email: '' };

function reducer(state, action) {
  return { ...state, [action.name]: action.value };
}

function UserForm() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function handleChange(event) {
    dispatch({ name: event.target.name, value: event.target.value });
  }

  return (
    <div>
      <input type="text" name="name" value={state.name} onChange={handleChange} placeholder="Nama" />
      <input type="email" name="email" value={state.email} onChange={handleChange} placeholder="Email" />
      <p>Nama: {state.name}, Email: {state.email}</p>
    </div>
  );
}

export default UserForm;

✅ Cocok untuk form kompleks dengan banyak field.

6. Kesimpulan

• Gunakan useState() untuk menangani input sederhana.
• Gunakan objek state jika ada banyak input dalam satu form.
• Gunakan event.target.value untuk mengambil nilai input.
• Gunakan event.target.checked untuk menangani checkbox.
• Gunakan useReducer() jika form sudah kompleks.

Dengan memahami cara menangani input form di React menggunakan onChange, kita bisa membuat form yang lebih fleksibel, rapi, dan mudah di-maintain!