Cara Menggunakan Formik untuk Membuat Formulir di React

Formik adalah perpustakaan manajemen formulir yang menyediakan komponen dan kait untuk memudahkan proses pembuatan formulir React. Formik menangani status formulir, validasi, dan penangan kesalahan untuk Anda yang memudahkan pengumpulan dan penyimpanan data pengguna.

Dalam tutorial ini, Anda akan belajar bagaimana Anda bisa membuat formulir pendaftaran di React menggunakan Formik. Untuk mengikuti, Anda harus merasa nyaman bekerja dengan kait React.

Buat Aplikasi Bereaksi

Gunakan buat-reaksi-aplikasi untuk buat proyek Bereaksi baru:

npx buat-bereaksi-aplikasi formik-form

Sekarang, navigasikan ke bentuk-formik/src folder dan hapus semua file kecuali aplikasi.js.

Selanjutnya, buat file baru dan beri nama Daftar.js. Di sinilah Anda akan menambahkan formulir Anda. Ingatlah untuk mengimpornya di aplikasi.js.

Buat Formulir Bereaksi

Anda dapat membuat formulir React menggunakan komponen yang dikontrol atau komponen yang tidak dikontrol. Komponen yang dikontrol adalah komponen yang data bentuknya ditangani oleh React itu sendiri. Komponen yang tidak terkontrol adalah komponen yang data bentuknya ditangani oleh DOM.

Resmi Bereaksi dokumen merekomendasikan menggunakan komponen terkontrol. Mereka membiarkan Anda melacak data formulir di negara bagian lokal dan karena itu memiliki kontrol penuh atas formulir.

Di bawah ini adalah contoh formulir yang dibuat menggunakan komponen yang dikontrol.

impor { useState } dari "bereaksi";
const Daftar = () => {
 const [email, setemail] = useState("");
 const [kata sandi, set kata sandi] = useState("");
 const handleSubmit = (acara) => {
 event.preventDefault();
 console.log (email);
 };
 const handleEmail = (acara) => {
 setemail (event.target.value);
 };
 const handlePassword = (acara) => {
 setpassword (event.target.value);
 };
 kembali (


 id="email"
 nama="email"
 ketik="email"
 placeholder="Email Anda"
 nilai={email}
 onChange={handleEmail}
 />
 id = "kata sandi"
 nama = "kata sandi"
 ketik = "kata sandi"
 placeholder = "Kata sandi Anda"
 nilai={kata sandi}
 onChange={handlePassword}
 />




 );
};
ekspor Daftar default;

Dalam kode di atas, Anda adalah inisialisasi status dan membuat fungsi handler untuk setiap field input. Saat ini berfungsi, kode Anda dapat dengan mudah menjadi berulang dan berantakan terutama dengan banyak bidang input. Menambahkan validasi dan penanganan pesan kesalahan adalah tantangan lain.

Formik bertujuan untuk mengurangi masalah tersebut. Itu membuatnya mudah untuk menangani status formulir, memvalidasi, dan mengirimkan data formulir.

Tambahkan Formik ke React

Sebelum menggunakan formik, tambahkan ke proyek Anda menggunakan npm.

npm instal formik

Untuk mengintegrasikan Formik, Anda akan menggunakan gunakanFormik kait. Di Daftar.js, impor useFormik di bagian atas file:

impor { useFormik } dari "formik"

Langkah pertama adalah menginisialisasi nilai formulir. Dalam hal ini, Anda akan menginisialisasi email dan kata sandi.

const formik = gunakanFormik({
 nilai awal: {
 surel: "",
 kata sandi: "",
 },
 onSubmit: nilai => {
// menangani pengiriman formulir
 },
});

Anda juga menambahkan fungsi onSubmit yang menerima nilai formulir dan menangani pengiriman formulir. Untuk formulir pendaftaran seperti ini, ini bisa berarti membuat pengguna baru di database.

Langkah selanjutnya adalah menggunakan formik objek untuk mendapatkan nilai formulir masuk dan keluar dari keadaan.

 id="email"
 nama="email"
 ketik="email"
 placeholder="Email Anda"
 nilai={formik.nilai.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id = "kata sandi"
 nama = "kata sandi"
 ketik = "kata sandi"
 placeholder = "Kata sandi Anda"
 nilai={formik.nilai.sandi}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Dalam kode di atas, Anda adalah:

• Memberikan kolom input dan Indo dan nama nilai yang sama dengan yang digunakan selama inisialisasi di gunakanFormik kait.
• Mengakses nilai bidang, menggunakan namanya untuk mengambilnya dari formik.nilai.
• Mengikat formik.handleChange ke acara onChange untuk menampilkan nilai input saat pengguna mengetik.
• Menggunakan formik.handleBlur untuk melacak bidang yang dikunjungi.
• Mengikat formik.handleKirim ke diKirim peristiwa untuk memicu diKirim fungsi yang Anda tambahkan ke gunakanFormik kait.

Aktifkan Validasi Formulir

Saat membuat formulir, penting untuk memvalidasi input pengguna saat membuatnya otentikasi pengguna mudah karena Anda hanya menyimpan data dalam format yang benar. Dalam formulir Anda, misalnya, Anda dapat memeriksa apakah email yang diberikan valid dan apakah kata sandi memiliki lebih dari 8 karakter.

Untuk memvalidasi formulir, tentukan fungsi validasi yang menerima nilai formulir dan mengembalikan objek kesalahan.

Jika Anda menambahkan fungsi validasi ke gunakanFormik, kesalahan validasi apa pun yang ditemukan akan tersedia di Formik.errors, diindeks pada nama input. Misalnya, Anda dapat mengakses kesalahan tentang bidang email menggunakan Formik.errors.email.

Di Daftar.js, buat mengesahkan fungsi dan memasukkannya ke dalam gunakanFormik.

const formik = gunakanFormik({
 nilai awal: {
 surel: "",
 kata sandi: "",
 },
 validasi: () => {
 kesalahan const = {};
 console.log (kesalahan)
 if (!formik.nilai.email) {
 error.email = "Diperlukan";
 } lain jika (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 error.email = "Alamat email tidak valid";
 }
 if (!formik.nilai.sandi) {
 error.password = "Diperlukan";
 } else if (formik.values.password.length < 8) {
 error.password = "Harus 8 karakter atau lebih";
 }
 mengembalikan kesalahan;
 },
 onSubmit: (nilai) => {
 console.log("dikirim!");
 // menangani pengiriman
 },
});

Tambahkan Penanganan Kesalahan

Selanjutnya, tampilkan pesan kesalahan jika ada. Menggunakan Formik.touched untuk memeriksa apakah lapangan telah dikunjungi. Ini mencegah menampilkan kesalahan untuk bidang yang belum dikunjungi pengguna.

 id="email"
 nama="email"
 ketik="email"
 placeholder="Email Anda"
 nilai={formik.nilai.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nol}
 id = "kata sandi"
 nama = "kata sandi"
 ketik = "kata sandi"
 placeholder = "Kata sandi Anda"
 nilai={formik.nilai.sandi}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: nol}

Validasi Data Menggunakan Yup

Formik menyediakan cara yang lebih mudah untuk memvalidasi formulir menggunakan ya Perpustakaan. Instal yup untuk memulai.

npm install yup

Impor ya di Daftar.js.

impor * sebagai Yup dari "yup"

Alih-alih menulis fungsi validasi kustom Anda sendiri, gunakan Yup untuk memeriksa apakah email dan kata sandi valid.

const formik = gunakanFormik({
 nilai awal: {
 surel: "",
 kata sandi: "",
 },
 validasiSchema: Yup.object().shape({
 email: Yup.string()
 .email("Alamat email tidak valid")
 .diperlukan("Diperlukan"),
 kata sandi: Yup.string()
 .min (8, "Harus 8 karakter atau lebih")
 .diperlukan("Diperlukan")
 }),
 onSubmit: (nilai) => {
 console.log("dikirim!");
// menangani pengiriman
 },
});

Dan itu saja! Anda telah membuat formulir pendaftaran sederhana menggunakan Formik dan Yup.

Membungkus Semuanya

Formulir merupakan bagian integral dari aplikasi apa pun karena memungkinkan Anda mengumpulkan informasi pengguna. Di React, membuat formulir bisa menjadi pengalaman yang menyakitkan terutama jika Anda berurusan dengan banyak data atau banyak formulir. Alat seperti Formik menyediakan cara yang mudah dan mulus untuk mengambil dan memvalidasi nilai formulir.

10 Praktik Terbaik React yang Harus Anda Ikuti Di 2022

Baca Selanjutnya

Tentang Penulis