Mengakses Nilai Input Secara Dinamis dengan Event Target Value Tanpa Ribet

Pernah Bingung Cara Ambil Nilai Input di React?

Saat bikin aplikasi React, kita sering butuh mengambil nilai input secara dinamis. Entah itu dari input teks, checkbox, radio button, atau dropdown, semuanya harus bisa diakses dan diproses dengan mudah.

Nah, event.target.value adalah cara paling simpel untuk mendapatkan nilai input yang diubah oleh pengguna. Dengan teknik ini, kita bisa menangani berbagai jenis input tanpa repot bikin banyak event handler terpisah. Yuk, kita bahas cara terbaik dan paling efektif mengakses nilai input di React!

1. Apa Itu event.target.value dan Kenapa Penting?

Ketika pengguna mengetik sesuatu dalam input, React tidak otomatis menyimpan nilainya. Kita perlu menangkap perubahan tersebut menggunakan event handler seperti onChange, lalu mengambil nilainya dengan event.target.value.

📌 Apa yang bisa diakses dengan event.target? ✅ event.target.value → Nilai dari input teks, textarea, dan dropdown.
✅ event.target.checked → Status checked dari checkbox dan radio button.
✅ event.target.name → Nama input, berguna untuk menangani banyak field sekaligus.

Dengan memahami cara kerja event.target, kita bisa membuat form yang lebih dinamis dan fleksibel!

2. Menggunakan event.target.value untuk Input Teks

Cara paling dasar menggunakan event.target.value adalah dengan menangani perubahan input teks.

📌 Contoh Input Teks dengan event.target.value

import React, { useState } from 'react';

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

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

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

export default TextInput;

✅ Sekarang setiap perubahan di input langsung tersimpan ke state!

📌 Penjelasan:

• onChange={handleChange} → Memastikan setiap perubahan input diproses oleh event handler.
• event.target.value → Mengambil nilai terbaru dari input.
• setText(event.target.value) → Memperbarui state dengan nilai input yang baru.

3. Mengakses Banyak Input Secara Dinamis dengan event.target.name

Kalau kita punya banyak input, akan ribet kalau harus bikin satu useState() untuk tiap field. Lebih baik gunakan satu state objek dan manfaatkan event.target.name untuk mengupdate state secara dinamis.

📌 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;

✅ Sekarang semua input bisa di-handle dalam satu fungsi!

📌 Penjelasan:

• Menggunakan objek state agar semua input tersimpan dalam satu variabel.
• name di setiap input harus sesuai dengan key dalam state.
• setForm({ ...form, [name]: value }) → Memastikan state diperbarui tanpa menghapus data lama.

4. Mengakses Checkbox dan Radio Button dengan event.target.checked

Untuk checkbox dan radio button, kita tidak bisa menggunakan event.target.value. Sebagai gantinya, kita gunakan event.target.checked.

📌 Contoh Checkbox

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 menangkap status checkbox.
• Gunakan checked={isChecked} agar nilai checkbox tetap terkontrol oleh React.

✅ Sekarang checkbox bisa diaktifkan atau dinonaktifkan dengan benar!

5. Kesimpulan

• Gunakan event.target.value untuk mendapatkan nilai input teks dan textarea.
• Gunakan event.target.name untuk menangani banyak input sekaligus.
• Gunakan event.target.checked untuk checkbox dan radio button.
• Pakai objek state agar lebih rapi dan mudah dikelola saat ada banyak input.

Dengan memahami cara mengakses nilai input secara dinamis dengan event.target.value, kita bisa bikin form React yang lebih fleksibel, simpel, dan mudah di-maintain!