React Hook Formunu Kullanarak React'te Formlar Nasıl Oluşturulur

Bir React uygulamasında form oluşturmak karmaşık ve zaman alıcı olabilir. React Hook Form kütüphanesinin yardımıyla yüksek performanslı formları React uygulamanıza kolayca ekleyebilirsiniz.

React Hook Form, karmaşık ve yeniden kullanılabilir formlar oluşturma sürecini basitleştiren, React'te formlar oluşturmaya yönelik bir kitaplıktır. Bir React uygulaması oluşturmak istiyorsanız, React Hook Form kitaplığını kullanarak React'te nasıl form oluşturacağınızı öğrenmelisiniz.

React Hook Formunu Kurma

React Hook Form'u kullanmaya başlamak için, npm veya yarn paket yöneticilerini kullanarak kurmalısınız.

React Hook Form'u npm kullanarak kurmak için terminalinizde aşağıdaki komutu çalıştırın:

npm tepki kancası formunu kurun

React Hook Form'u yarn kullanarak kurmak için aşağıdaki komutu çalıştırın:

yarn tepki kancası formu ekleyin

React Hook Formunu Kullanarak Form Oluşturma

React Hook Form kullanarak bir form oluşturmak için, kullanımFormu kanca. bu

kullanımFormu kanca, kullanacağınız yöntemlere ve özelliklere erişmenizi sağlar formlarınızı React uygulamanızda oluşturun ve yönetin.

İşte nasıl kullanılacağını gösteren bir örnek kullanımFormu kanca:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { Formu kullan } itibaren"tepki kancası formu";
işlevBiçim() {
sabit { register, handleSubmit } = useForm();
sabit gönderildiğinde = (veri) =>konsol.log (veri);
geri dönmek (



'metin' { ...kayıt olmak("ilk adı")} />
gönder</button>
 </form>
 )
}
ihracatvarsayılan Biçim;

React Hook Form kitaplığı, kayıt olmak giriş değerlerinizi kancaya kaydetme yöntemi. bu kayıt olmak yöntemi, bir formun giriş alanlarını React Hook Form kitaplığına bağlar, böylece kitaplık giriş alanlarını izleyebilir ve doğrulayabilir.

Yukarıdaki kod bloğunda, 'ad' adıyla bir giriş kaydedersiniz. işlemeGönder React Hook Form kitaplığının yöntemi, formun gönderilmesini işler.

Form gönderimini işlemek için geri arama işlevini geçeceksiniz gönderildiğinde için işlemeGönder yöntem. bu gönderildiğinde işlev, tüm form girdilerinin değerlerini içeren bir nesne alacaktır.

Girişleri Kayıt Yöntemiyle Doğrula

bu kayıt olmak yöntemi, giriş alanlarınız için doğrulama kuralları oluşturmanıza olanak tanır. Giriş alanlarınıza doğrulama eklemek için, ikinci argüman olarak doğrulama kurallarına sahip bir nesne iletirsiniz. kayıt olmak yöntem.

Şöyle:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { Formu kullan } itibaren"tepki kancası formu";
işlevBiçim() {
sabit{ register, handleSubmit } = useForm();
sabit gönderildiğinde = (veri) =>konsol.log (veri);
geri dönmek (



'metin' { ...kayıt olmak("ilk adı", { gerekli: doğru})} />
'şifre' { ...kayıt olmak("şifre", { gerekli: doğru, maksimum uzunluk: 10})}/>
gönder</button>
 </form>
 )
}
ihracatvarsayılan Biçim;

Bu örnekte, "ad" giriş alanına bir doğrulama kuralı ve "parola" alanına iki doğrulama kuralı eklersiniz. bu gerekli kuralı, kullanıcının giriş alanlarını doldurması gerektiğini belirtir ve alanlar boşsa formu gönderemezler.

bu maksimum uzunluk rule, giriş değerinin maksimum alfabetik harf sayısını ayarlar. dışında gerekli Ve maksimum uzunluk gibi başka doğrulama kuralları ekleyebilirsiniz. dakika, maks., minUzunluk, model, Ve doğrulamak.

en az en çok

bu dakika kuralı, bir giriş alanı için minimum değeri belirtir ve maks. kural maksimum değerini belirtir.

kullanabilirsiniz dakika Ve maks. sayı türü girişleri olan kurallar, bunun gibi:

'sayı' { ...kayıt olmak("yaş", {dakika: 18, maks.: 35}) } />

Yukarıdaki giriş alanının değeri en az 18 en fazla 35 olmalıdır.

minUzunluk

bu minUzunluk kural şuna benzer maksimum uzunluk kural ancak bunun yerine minimum alfabetik harf sayısını ayarlar:

'metin' { ...kayıt olmak("isim", { minUzunluk: 10 })}/>

Bu örnekte minLength kuralı, girdi değerinin en az 10 karakter uzunluğunda olması gerektiğini belirtir.

desen ve doğrulama

bu model rule, giriş değerinin eşleşmesi gereken bir normal ifade modelini belirtir. bu doğrulamak rule, giriş değerini doğrulamak için özel bir doğrulama işlevi tanımlamanıza olanak tanır. İşlev ya geri dönmelidir doğru veya bir dizi hata mesajı.

Örneğin:

'metin' { ...kayıt olmak("ilk adı", {model: **/^[A-Za-z]+$/**}) } />
'sayı' { ...kayıt olmak("Ölçek", {**doğrula: (değer) => değer <= 12** }) } />

Bu örnekte, "ad" girişi şu ifadeyi kullanır: model kural. bu model giriş değerinin yalnızca alfabetik karakterler (büyük ve küçük harf) içermesini gerektirir.

"test" girişi, doğrulamak değerinin 12'den küçük veya eşit olup olmadığını kontrol eden özel bir doğrulama işlevi tanımlamak için kural.

Formunuzdaki Hataları Ele Alma

React Hook Form kitaplığı, aşağıdakiler için yerleşik bir mekanizma sağlar: JavaScript hatalarını işleme formlarınızda. bu işlemeGönder kullanıcı formu gönderdiğinde çağrılan işlev, doğrulama başarılı olursa form verileriyle çözülen bir söz verir.

Ancak herhangi bir doğrulama hatası oluşursa, söz doğrulama hatalarını içeren bir hata nesnesiyle reddedilir.

kullanarak hataların nasıl ele alınacağına dair bir örnek aşağıda verilmiştir. işlemeGönder işlev:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { Formu kullan } itibaren"tepki kancası formu";
işlevBiçim() {
sabit { kayıt, işlemeGönder, biçimDevlet: { hatalar } } = useForm();
sabit gönderildiğinde = (veri) =>konsol.log (veri); 
geri dönmek (



'metin' { ...kayıt olmak("ilk adı", { gerekli: doğru})} />
 {hatalar.adı && <açıklık>Lütfen Adınızı girinaçıklık>}
'sayı' { ...kayıt olmak("yaş", {dakika: 18, maks.: 35,}) } />
 {hatalar.yaş?.tür "maksimum" && <açıklık> Bu site için çok yaşlısınaçıklık>}
 {hatalar.yaş?.tür 'dk' && <açıklık> Bu site için çok gençsinaçıklık>}
gönder</button>
 </form>
 )
}
ihracatvarsayılan Biçim;

Bu kod bloğunda, biçimDevlet nesne, her alanın hatalarına erişim kazanır. bu hatalar nesne, her giriş alanı için doğrulama hatalarını saklar. bu hatalar nesne koşullu olarak her geçersiz alan için bir hata mesajı verir.

İçin ilk adı giriş alanı, eğer gerekli kural karşılanmazsa, giriş alanının yanında bir hata mesajı—"Lütfen Adınızı girin"—görüntülenecektir. Eğer değeri yaş giriş alanı izin verilen aralığın dışındaysa bir hata mesajı görüntülenecektir.

Değer 18'den küçükse, hata mesajı "Bu site için çok gençsiniz", değer 35'ten büyükse "Bu site için çok yaşlısınız" hata mesajı olacaktır.

Artık React'te Güvenilir Formlar Oluşturabilirsiniz

React'te form oluşturmak karmaşık ve zaman alıcı bir süreç olabilir. Yine de React Hook Form, form verilerini yönetmek ve doğrulamak için kullanımı kolay ve esnek bir kitaplık sağlayarak bu görevi basitleştirir.

useForm kancası, register yöntemi ve handleSubmit yönteminin yardımıyla, React'te form oluşturmak daha verimli ve kolaylaştırılmış bir süreç haline gelir. React uygulamalarınızın kullanıcı deneyimini ve genel kalitesini iyileştirerek işlevsel formlar oluşturabilirsiniz.