React Academy · Pelajaran

Memulai dengan React Hook Form

Pasang RHF, panggil useForm, daftarkan input, dan tangani pengiriman formulir.

Memulai dengan React Hook Form adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan memasang React Hook Form, memanggil useForm, mendaftarkan masukan, dan menangani pengiriman formulir tanpa mengelola variabel status secara satu per satu.

Mengapa React Hook Form?

Formulir terkontrol tradisional di React memerlukan satu useState untuk setiap kolom dan satu onChange untuk setiap masukan. React Hook Form (RHF) mengelola semua ini secara internal menggunakan masukan tidak terkontrol, sehingga Anda mendapatkan API yang lebih sederhana dengan lebih sedikit proses render ulang.

Pemasangan

Pasang paket tersebut. Tidak diperlukan dependensi rekan tambahan untuk penggunaan dasar.

npm install react-hook-form

Fungsi useForm

Panggil useForm() untuk mendapatkan fungsi register, pembungkus handleSubmit, dan formState. Ketiganya adalah bagian inti yang Anda perlukan untuk setiap formulir.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Mendaftarkan Masukan

Sebarkan hasil register('fieldName') ke setiap masukan. RHF secara internal memasang ref dan pengendali peristiwa ke masukan — tidak diperlukan value atau onChange.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

Panggilan Balik onSubmit

handleSubmit memvalidasi semua kolom dan memanggil panggilan balik onSubmit Anda dengan objek data bertipe hanya ketika formulir valid. Jika validasi gagal, fungsi tersebut justru mengisi formState.errors.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Nilai Bawaan

Berikan `defaultValues` ke useForm untuk mengisi kolom formulir terlebih dahulu. Ini berguna untuk formulir penyuntingan ketika Anda memuat data yang sudah ada.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Properti formState

formState menyediakan nilai benar/salah yang berguna: `isSubmitting` (bernilai true selama handleSubmit berjalan), `isDirty` (bernilai true jika ada kolom yang berubah), `isValid` (bernilai true jika tidak ada kesalahan), serta objek `errors`.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Mengatur Ulang Formulir

Panggil `reset()` untuk mengosongkan semua kolom dan mengatur ulang formState. Anda juga dapat memberikan nilai bawaan yang baru.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Keunggulan Kinerja

Karena RHF menggunakan masukan tidak terkontrol, formulir tidak dirender ulang pada setiap ketikan — berbeda dari formulir React terkontrol. Hanya kesalahan validasi dan status pengiriman yang menyebabkan render ulang, sehingga formulir besar tetap responsif.

Pemeriksaan Singkat

Apa yang dilakukan handleSubmit(onSubmit) ketika pengguna mengirimkan formulir?

Ringkasan

Pasang RHF, panggil useForm untuk mendapatkan register dan handleSubmit, sebarkan register() pada masukan, lalu bungkus pengendali pengiriman Anda dengan handleSubmit. Tetapkan defaultValues untuk formulir penyuntingan dan panggil reset() setelah pengiriman berhasil.

Selanjutnya

Pelajaran berikutnya: **Aturan Validasi dan Pesan Kesalahan** — Anda akan menerapkan aturan validasi bawaan dan menampilkan pesan kesalahan kepada pengguna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memulai dengan React Hook Form” gratis?

Ya — teks lengkap “Memulai dengan React Hook Form” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memulai dengan React Hook Form”?

Pasang RHF, panggil useForm, daftarkan input, dan tangani pengiriman formulir. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Memulai dengan React Hook Form” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy