Terjemahan ke Bahasa Indonesia

Halo, para pemula pemrogram! Hari ini, kita akan mendalaminya dunia yang menarik dari pemrograman form di ReactJS. Sebagai guru ilmu komputer tetangga yang ramah, saya di sini untuk mengarahkan Anda dalam perjalanan ini langkah demi langkah. Jadi, ambillah secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

Apa Itu Forms di ReactJS?

Sebelum kita melompat ke kode, mari kita pahami apa itu form dan mengapa mereka penting. Forms adalah seperti penjaga gerbang masukan pengguna dalam aplikasi web. Mereka memungkinkan pengguna untuk berinteraksi dengan aplikasi kami, menyediakan informasi yang kita bisa proses dan gunakan. Di React, forms memiliki ciri khas karena mereka menjaga state mereka sendiri. Ini berarti kita perlu menghandle mereka sedikit berbeda daripada elemen lain.

Dasar-dasar Penghandlean Form

mari kita mulai dengan contoh form sederhana:

import React, { useState } from 'react';

function SimpleForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Sebuah nama telah disubmit: ' + name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nama:
        <input type="text" value={name} onChange={e => setName(e.target.value)} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

mari kitauraikan ini:

1. Kita import useState dari React untuk mengelola state form kita.
2. Kita buat variabel state name dan fungsi setName untuk mengupdate nya.
3. Fungsi handleSubmit menghindari submit form default dan menampilkan alert dengan nama yang disubmit.
4. Dalam form, kita set value input ke state name kita dan gunakan onChange untuk mengupdate state saat input berubah.

Ini adalah inti penghandlean form di React. Kita mengontrol state form dengan React, ini mengapa kita menyebutnya "controlled component".

Menghandle Input Banyak

Apa bila kita memiliki banyak input? Kita harus membuat state terpisah untuk masing-masing? Tidak necessarily! Mari kita lihat form yang lebih kompleks:

import React, { useState } from 'react';

function MultipleInputForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form disubmit:', formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="firstName"
        value={formData.firstName}
        onChange={handleChange}
        placeholder="Nama Depan"
      />
      <input
        type="text"
        name="lastName"
        value={formData.lastName}
        onChange={handleChange}
        placeholder="Nama Belakang"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Dalam contoh ini, kita menggunakan satu objek state untuk mengelola semua field form kita. Fungsi handleChange menggunakan atribut name input untuk mengupdate field yang benar di state kita. Pendekatan ini akan berskalabilitas baik saat form Anda menjadi lebih besar.

Menghandle Tipe Input Berbeda

Forms tidak hanya tentang input text. Mari kita lihat bagaimana kita bisa menghandle tipe input berbeda:

import React, { useState } from 'react';

function DiverseForm() {
  const [formData, setFormData] = useState({
    name: '',
    age: '',
    gender: '',
    isStudent: false,
    favoriteColor: 'blue'
  });

  const handleChange = (event) => {
    const { name, value, type, checked } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: type === 'checkbox' ? checked : value
    }));
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form disubmit:', formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="number"
        name="age"
        value={formData.age}
        onChange={handleChange}
        placeholder="Age"
      />
      <select name="gender" value={formData.gender} onChange={handleChange}>
        <option value="">Pilih Gender</option>
        <option value="male">Pria</option>
        <option value="female">Wanita</option>
        <option value="other">Lainnya</option>
      </select>
      <label>
        <input
          type="checkbox"
          name="isStudent"
          checked={formData.isStudent}
          onChange={handleChange}
        />
        Apakah Anda seorang siswa?
      </label>
      <fieldset>
        <legend>Warna Kesukaan</legend>
        <label>
          <input
            type="radio"
            name="favoriteColor"
            value="red"
            checked={formData.favoriteColor === 'red'}
            onChange={handleChange}
          />
          Merah
        </label>
        <label>
          <input
            type="radio"
            name="favoriteColor"
            value="blue"
            checked={formData.favoriteColor === 'blue'}
            onChange={handleChange}
          />
          Biru
        </label>
        <label>
          <input
            type="radio"
            name="favoriteColor"
            value="green"
            checked={formData.favoriteColor === 'green'}
            onChange={handleChange}
          />
          Hijau
        </label>
      </fieldset>
      <button type="submit">Submit</button>
    </form>
  );
}

Form ini menunjukkan bagaimana menghandle berbagai tipe input: text, number, select, checkbox, dan tombol radio. Kunci berada di fungsi handleChange, yang memeriksa tipe input dan mengupdate state sesuai nya.

Validasi Form

Tidak ada form yang lengkap tanpa validasi. Mari kita tambahkan validasi dasar ke form kita:

import React, { useState } from 'react';

function ValidatedForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  }

  const validateForm = () => {
    let newErrors = {};
    if (!formData.username) newErrors.username = 'Username diperlukan';
    if (!formData.email) {
      newErrors.email = 'Email diperlukan';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Email invalid';
    }
    if (!formData.password) {
      newErrors.password = 'Password diperlukan';
    } else if (formData.password.length < 6) {
      newErrors.password = 'Password harus minimal 6 karakter';
    }
    return newErrors;
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validateForm();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      console.log('Form disubmit:', formData);
      // Di sini Anda biasanya mengirimkan data ke server
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
          placeholder="Username"
        />
        {errors.username && <span className="error">{errors.username}</span>}
      </div>
      <div>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Email"
        />
        {errors.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="Password"
        />
        {errors.password && <span className="error">{errors.password}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

Dalam contoh ini, kita menambahkan fungsi validateForm yang memeriksa field kosong dan validasi format email serta panjang password. Kita menyimpan kesalahan di objek state terpisah dan menampilkan mereka di bawah field relevan.

Kesimpulan

Dan begitu juga! Kita telah melihat dasar-dasar penghandlean form di React, dari input text sederhana ke form yang lebih kompleks dengan berbagai tipe input dan validasi. Ingat, latihan membuat sempurna. Cobalah membuat form Anda sendiri, eksperimen dengan tipe input berbeda, dan jangan takut untuk membuat kesalahan - itu adalah bagaimana kita belajar!

Berikut adalah tabel rujukan cepat metode yang kita gunakan:

Metode	Tujuan
useState	Membuat dan mengelola state di komponen fungsional
onChange	Menghandle perubahan di input form
onSubmit	Menghandle submit form
preventDefault	Menghindari perilaku submit form default

Happy coding, dan semoga form Anda selalu ramah pengguna dan bebas bug!

Credits: Image by storyset