Cara Membuat Formulir di React Menggunakan React Hook Form

Membuat formulir dalam aplikasi React bisa rumit dan menghabiskan waktu. Dengan bantuan pustaka React Hook Form, Anda dapat dengan mudah menambahkan formulir berperforma tinggi ke aplikasi React Anda.

React Hook Form adalah pustaka untuk membuat formulir di React yang menyederhanakan proses pembuatan formulir yang kompleks dan dapat digunakan kembali. Jika Anda ingin membuat aplikasi React, Anda harus mempelajari cara membuat formulir di React menggunakan pustaka React Hook Form.

Menginstal Formulir React Hook

Untuk mulai menggunakan React Hook Form, Anda harus menginstalnya menggunakan npm atau pengelola paket benang.

Untuk menginstal React Hook Form menggunakan npm, jalankan perintah berikut di terminal Anda:

npm install react-hook-form

Untuk menginstal React Hook Form menggunakan benang, jalankan perintah berikut:

benang tambahkan reaksi-kait-bentuk

Membuat Formulir Menggunakan React Hook Form

Untuk membuat formulir menggunakan React Hook Form, Anda harus menggunakan

useForm kait. Itu useForm hook memberi Anda akses ke metode dan properti yang akan Anda gunakan bangun dan kelola formulir Anda di aplikasi React Anda.

Berikut adalah contoh yang menunjukkan cara menggunakan useForm kait:

impor Reaksi dari'reaksi'
impor { useForm } dari'reaksi-kait-bentuk';
fungsiMembentuk() {
const { daftar, handleSubmit } = useForm();
const pada Kirim = (data) =>menghibur.log (data);
kembali (



'teks' { ...daftar("nama depan")} />
Kirim </button>
 </form>
 )
}
eksporbawaan Membentuk;

Pustaka React Hook Form menggunakan daftar metode untuk mendaftarkan nilai input Anda ke hook. Itu daftar metode menghubungkan bidang input formulir ke perpustakaan React Hook Form sehingga perpustakaan dapat melacak dan memvalidasi bidang input.

Di blok kode di atas, Anda mendaftarkan input dengan nama 'nama depan' handleSubmit metode pustaka React Hook Form menangani pengiriman formulir.

Untuk menangani pengiriman formulir, Anda akan melewati fungsi callback onSubmit ke handleSubmit metode. Itu onSubmit fungsi akan menerima objek yang berisi nilai dari semua input formulir.

Validasi Input Dengan Metode Register

Itu daftar metode memungkinkan Anda untuk mengatur aturan validasi untuk kolom input Anda. Untuk menambahkan validasi ke bidang masukan, Anda meneruskan objek dengan aturan validasi sebagai argumen kedua ke daftar metode.

Seperti itu:

impor Reaksi dari'reaksi'
impor { useForm } dari'reaksi-kait-bentuk';
fungsiMembentuk() {
const{ daftar, handleSubmit } = useForm();
const pada Kirim = (data) =>menghibur.log (data);
kembali (



'teks' { ...daftar("nama depan", { diperlukan: BENAR})} />
'kata sandi' { ...daftar("kata sandi", { diperlukan: BENAR, panjang maksimal: 10})}/>
Kirim </button>
 </form>
 )
}
eksporbawaan Membentuk;

Dalam contoh ini, Anda menambahkan aturan validasi ke kolom input "nama depan" dan dua aturan validasi ke "kata sandi". Itu diperlukan aturan menentukan bahwa pengguna harus mengisi kolom input, dan mereka tidak dapat mengirimkan formulir jika kolom kosong.

Itu panjang maksimal aturan mengatur jumlah maksimum huruf abjad dari nilai input. Selain dari diperlukan Dan panjang maksimal metode, Anda dapat menambahkan aturan validasi lainnya, seperti min, maks, minLength, pola, Dan mengesahkan.

min & maks

Itu min aturan menentukan nilai minimum untuk bidang input dan maks aturan menentukan nilai maksimumnya.

Anda dapat menggunakan min Dan maks aturan dengan input tipe angka, seperti ini:

'nomor' { ...daftar("usia", {min: 18, maks: 35}) } />

Nilai kolom input di atas harus minimal 18 dan tidak lebih dari 35.

minLength

Itu minLength aturannya mirip dengan panjang maksimal aturan tetapi tetapkan jumlah minimum huruf abjad sebagai gantinya:

'teks' { ...daftar("nama", { minLength: 10 })}/>

Dalam contoh ini, aturan minLength menetapkan bahwa panjang nilai input harus minimal 10 karakter.

pola & validasi

Itu pola aturan menentukan pola ekspresi reguler yang harus cocok dengan nilai input. Itu mengesahkan aturan memungkinkan Anda menentukan fungsi validasi khusus untuk memvalidasi nilai input. Fungsi juga harus kembali BENAR atau pesan kesalahan string.

Misalnya:

'teks' { ...daftar("nama depan", {pola: **/^[A-Za-z]+$/**}) } />
'nomor' { ...daftar("tes", {**validasi: (nilai) => nilai <= 12** }) } />

Dalam contoh ini, input "nama depan" menggunakan pola aturan. Itu pola mensyaratkan bahwa nilai input hanya berisi karakter alfabet (huruf besar dan kecil).

Input "tes" menggunakan mengesahkan aturan untuk menentukan fungsi validasi khusus yang memeriksa apakah nilainya kurang dari atau sama dengan 12.

Menangani Kesalahan dalam Formulir Anda

Pustaka React Hook Form menyediakan mekanisme bawaan untuk menangani kesalahan JavaScript dalam formulir Anda. Itu handleSubmit fungsi, dipanggil saat pengguna mengirimkan formulir, mengembalikan janji yang diselesaikan dengan data formulir jika validasi berhasil.

Namun, jika terjadi kesalahan validasi, janji ditolak dengan objek kesalahan yang berisi kesalahan validasi.

Berikut adalah contoh cara menangani kesalahan menggunakan handleSubmit fungsi:

impor Reaksi dari'reaksi'
impor { useForm } dari'reaksi-kait-bentuk';
fungsiMembentuk() {
const { daftar, handleSubmit, formState: { kesalahan } } = useForm();
const pada Kirim = (data) =>menghibur.log (data); 
kembali (



'teks' { ...daftar("nama depan", { diperlukan: BENAR})} />
 {errors.nama depan && <menjangkau>Silakan masukkan Nama Depan Andamenjangkau>}
'nomor' { ...daftar("usia", {min: 18, maks: 35,}) } />
 {errors.age?.type 'maks' && <menjangkau> Anda terlalu tua untuk situs inimenjangkau>}
 {errors.age?.type 'menit' && <menjangkau> Anda terlalu muda untuk situs inimenjangkau>}
Kirim </button>
 </form>
 )
}
eksporbawaan Membentuk;

Dalam blok kode ini, file formState objek mendapatkan akses ke kesalahan setiap bidang. Itu kesalahan objek menyimpan kesalahan validasi untuk setiap kolom input. Itu kesalahan objek secara kondisional membuat pesan kesalahan untuk setiap bidang yang tidak valid.

Untuk nama depan kolom input, jika diperlukan aturan tidak terpenuhi, pesan kesalahan—"Silakan masukkan Nama Depan Anda"—akan ditampilkan di sebelah kolom input. Jika nilai dari usia bidang input berada di luar rentang yang diizinkan, pesan kesalahan akan ditampilkan.

Jika nilainya kurang dari 18, pesan kesalahannya adalah "Anda terlalu muda untuk situs ini", dan jika nilainya lebih besar dari 35, pesan kesalahannya adalah "Anda terlalu tua untuk situs ini".

Sekarang Anda Dapat Membuat Formulir yang Andal di React

Membangun formulir di React bisa menjadi proses yang rumit dan memakan waktu. Tetap saja, React Hook Form menyederhanakan tugas ini dengan menyediakan pustaka yang mudah digunakan dan fleksibel untuk mengelola data formulir dan validasi.

Dengan bantuan hook useForm, metode register, dan metode handleSubmit, membuat formulir di React menjadi proses yang lebih efisien dan disederhanakan. Anda dapat membuat formulir fungsional, yang pada gilirannya akan meningkatkan pengalaman pengguna dan kualitas keseluruhan aplikasi React Anda.