Panduan Membangun Komponen Form React

𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗕𝘂𝗶𝗹𝗱 𝗚𝘂𝗶𝗱𝗲

Membangun form di React memerlukan manajemen state yang cermat. Panduan ini menunjukkan cara membangun form registrasi dari awal.

Anda akan mempelajari empat konsep utama:

• Manajemen State Simpan semua field form dalam satu objek state. Gunakan hook useState untuk melacak nama, usia, email, dan kata sandi.

• Menangani Input Gunakan satu fungsi untuk mengelola semua perubahan input. Anda memperbarui state dengan menyebarkan data lama dan menambahkan nilai baru berdasarkan nama input.

• Validasi Form Periksa apakah semua field berisi data sebelum pengiriman. Tampilkan peringatan jika ada field yang kosong.

• Dukungan Keyboard Tambahkan listener untuk tombol Enter. Ini memungkinkan pengguna mengirimkan form tanpa mengklik tombol.

Contoh Kode:

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  function getdata(e) {
    const { name, value } = e.target;
    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;
    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully");
    } else {
      alert("Please fill all fields");
    }
  }

  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

Sumber: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh