React'te Form Oluşturmak İçin Formik Nasıl Kullanılır?

Formik, React formları oluşturma sürecini kolaylaştırmak için bileşenler ve kancalar sağlayan bir form yönetim kitaplığıdır. Formik, kullanıcı verilerini toplamayı ve saklamayı kolaylaştıran form durumları, doğrulama ve hata işleyicileri sizin için halleder.

Bu eğitimde Formik kullanarak React'te nasıl kayıt formu oluşturabileceğinizi öğreneceksiniz. Takip etmek için, React kancalarıyla çalışırken rahat olmalısınız.

Bir React Uygulaması Oluşturun

oluşturmak-tepki-app kullanın yeni bir React projesi oluştur:

npx oluştur-tepki-uygulama formik-formu

Şimdi, şuraya gidin: formik-form/src klasörü ve dışındaki tüm dosyaları silin App.js.

Ardından, yeni bir dosya oluşturun ve adlandırın Register.js. Formunuzu ekleyeceğiniz yer burasıdır. İçeri aktarmayı unutmayın App.js.

Bir Tepki Formu Oluşturun

Kontrollü bileşenleri veya kontrolsüz bileşenleri kullanarak React formları oluşturabilirsiniz. Kontrollü bir bileşen, form verileri React'in kendisi tarafından işlenen bir bileşendir. Kontrolsüz bileşen, form verileri DOM tarafından işlenen bileşendir.

Resmi Tepki belgeleri kontrollü bileşenleri kullanmanızı öneririz. Yerel durumda form verilerini takip etmenize izin verir ve bu nedenle form üzerinde tam kontrole sahip olursunuz.

Aşağıda, kontrollü bir bileşen kullanılarak oluşturulan bir form örneği verilmiştir.

"tepki" den { useState } içe aktar;
const Kayıt = () => {
 const [e-posta, setemail] = useState("");
 const [parola, setpassword] = useState("");
 const handleSubmit = (olay) => {
 event.preventDefault();
 konsol.log (e-posta);
 };
 const handleEmail = (olay) => {
 setemail (event.target.value);
 };
 const handlePassword = (olay) => {
 setpassword (event.target.value);
 };
 dönüş (


 id="e-posta"
 isim = "e-posta"
 type="e-posta"
 placeholder="E-postanız"
 değer={e-posta}
 onChange={handleEmail}
 />
 id="parola"
 isim = "şifre"
 type="şifre"
 placeholder="Parolanız"
 değer={şifre}
 onChange={handlePassword}
 />




 );
};
varsayılan kaydı dışa aktar;

Yukarıdaki kodda, durumu başlatma ve her giriş alanı için bir işleyici işlevi oluşturma. Bu çalışırken, kodunuz özellikle birçok giriş alanıyla kolayca tekrarlanabilir ve karmaşık hale gelebilir. Doğrulama ve hata mesajı işleme eklemek başka bir zorluktur.

formik bu sorunları azaltmayı hedefliyor. Form durumunu işlemeyi, form verilerini doğrulamayı ve göndermeyi kolaylaştırır.

React'e Formik Ekle

Kullanmadan önce formikkullanarak projenize ekleyin. npm.

npm formik'i kurun

Formik'i entegre etmek için formik kullan kanca. İçinde Register.js, useFormik'i dosyanın en üstünde içe aktarın:

{ useFormik }'i "formik"ten içe aktar

İlk adım, form değerlerini başlatmaktır. Bu durumda, e-postayı ve şifreyi başlatacaksınız.

const formik = useFormik({
 başlangıç ​​değerleri: {
 e-posta: "",
 parola: "",
 },
 onSubmit: değerler => {
// form gönderimini yönet
 },
});

Ayrıca, form değerlerini alan ve form gönderimini yöneten onSubmit işlevini de ekliyorsunuz. Bunun gibi bir kayıt formu için bu, veritabanında yeni bir kullanıcı oluşturmak anlamına gelebilir.

Bir sonraki adım, formik form değerlerini durum içinde ve dışında almak için nesne.

 id="e-posta"
 isim = "e-posta"
 type="e-posta"
 placeholder="E-postanız"
 değer={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="parola"
 isim = "şifre"
 type="şifre"
 placeholder="Parolanız"
 değer={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Yukarıdaki kodda, siz:

• Giriş alanlarına bir İD ve isim başlatma sırasında kullanılana eşit değer formik kullan kanca.
• Bir alanın değerine erişmek, onu almak için adını kullanmak formik.değerler.
• bağlama formik.handleDeğiştir kullanıcı türleri olarak giriş değerlerini görüntülemek için onChange olayına.
• kullanma formik.handleBulanıklaştırma ziyaret edilen alanları takip etmek için.
• bağlama formik.handleGönder için onSubmit tetiklemek için olay onSubmit eklediğiniz fonksiyon formik kullan kanca.

Form Doğrulamayı Etkinleştir

Bir form oluştururken, kullanıcı girdisini oluştururken doğrulamak önemlidir. Kullanıcı doğrulama verileri yalnızca doğru biçimde sakladığınız için kolaydır. Örneğin formunuzda, verilen e-postanın geçerli olup olmadığını ve şifrenin 8 karakterden fazla olup olmadığını kontrol edebilirsiniz.

Formu doğrulamak için form değerlerini kabul eden ve bir hata nesnesi döndüren bir doğrulama işlevi tanımlayın.

Doğrulama işlevini eklerseniz formik kullan, bulunan herhangi bir doğrulama hatası şurada mevcut olacaktır: Formik.hatalar, giriş adında dizine eklenir. Örneğin, kullanarak e-posta alanıyla ilgili bir hataya erişebilirsiniz. Formik.errors.e-posta.

İçinde Register.js, oluştur doğrulamak işlev ve onu dahil formik kullan.

const formik = useFormik({
 başlangıç ​​değerleri: {
 e-posta: "",
 parola: "",
 },
 doğrulama: () => {
 const hataları = {};
 konsol.log (hatalar)
 if (!formik.values.email) {
 error.email = "Gerekli";
 } eğer (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 error.email = "Geçersiz e-posta adresi";
 }
 if (!formik.values.password) {
 error.password = "Gerekli";
 } else if (formik.values.password.length < 8) {
 error.password = "8 karakter veya daha fazla olmalıdır";
 }
 dönüş hataları;
 },
 onSubmit: (değerler) => {
 konsol.log("gönderildi!");
 // gönderimi ele al
 },
});

Hata İşleme Ekle

Ardından, varsa hata mesajlarını görüntüleyin. Kullanmak Formik.dokundu Alanın ziyaret edilip edilmediğini kontrol etmek için. Bu, kullanıcının henüz ziyaret etmediği bir alan için hata gösterilmesini önler.

 id="e-posta"
 isim = "e-posta"
 type="e-posta"
 placeholder="E-postanız"
 değer={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: boş}
 id="parola"
 isim = "şifre"
 type="şifre"
 placeholder="Parolanız"
 değer={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.şifre}
: boş}

Yup Kullanarak Verileri Doğrulayın

Formik, formları doğrulamak için daha kolay bir yol sağlar. Evet kütüphane. Başlamak için yup'u yükleyin.

npm kurulumu evet

İçe aktarmak Evet içinde Register.js.

* "yup" dan Yup olarak içe aktar

Kendi özel doğrulama işlevinizi yazmak yerine, e-posta ve parolanın geçerli olup olmadığını kontrol etmek için Yup'u kullanın.

const formik = useFormik({
 başlangıç ​​değerleri: {
 e-posta: "",
 parola: "",
 },
 validationSchema: Yup.object().shape({
 e-posta: Yup.string()
 .email("Geçersiz e-posta adresi")
 .required("Gerekli"),
 şifre: Yup.string()
 .min (8, "8 karakter veya daha fazla olmalıdır")
 .required("Gerekli")
 }),
 onSubmit: (değerler) => {
 konsol.log("gönderildi!");
// gönderimi ele al
 },
});

Ve bu kadar! Formik ve Yup kullanarak basit bir kayıt formu oluşturdunuz.

Her Şeyi Sarmak

Formlar, kullanıcı bilgilerini toplamanıza izin verdiği için herhangi bir uygulamanın ayrılmaz bir parçasıdır. React'te form oluşturmak, özellikle çok fazla veri veya birden çok formla uğraşıyorsanız acı verici bir deneyim olabilir. Formik gibi bir araç, form değerlerini almanın ve doğrulamanın kolay ve sorunsuz bir yolunu sağlar.

2022'de İzlemeniz Gereken 10 En İyi React Uygulaması

Sonrakini Oku

Yazar hakkında