React Native Form Yönetimi- React Final Form
Form elemanları artıkça yönetimi daha da zorlaşmaktadır. Bu kütüphane sayesinde form işlemleri yapmak kolay ve performanslı hale gelmiştir. Ayrıca React Native dışında React ile de kullanılabilmektedir. Bu kısım kütüphane dökümanlarında geçmemektedir. Sadece React ile kullanılıyor görünmekte.
Öncelikle kütüphaneyi ekleyelim.
yarn add final-form react-final-form
Kullanacağımız componentleri tanıyalım.
Form
Tüm formu çevreleyen ve state yönetimi sağlayan bir componentir.
Genel kullanılan propsları:
- onSubmit:
(values, errors) => {}.
Fonksiyon alır ve form gönderildiğinde çalışır. - initialValues:
json
objesi alır. Field’ların default değerlerini atamayı sağlar. - render:
({ handleSubmit }) => {}.
Fonksiyon alır ve field’ları döner.handleSubmit
fonksiyonu tetiklendiği form gönderilir. Doğrulamalar geçerli olursaonSubmit
tetiklenir.
Kod örneği:
Field
Bir alanı içeren ve form’a dahil eden component’tir.
Genel kullanılan propslar:
- name: string değer alır. Benzersiz olması gerekir. Field’ı temsil eder.
- validate:
(value) => {}
.Fonksiyon alır ve field’a özgü doğrulama işlemi yapmayı sağlar. Json objesi alır ve birden fazla doğrulama işlemi yapabilirsiniz. - render:
({ input, meta }) => {}
. Fonksiyon alır ve input kısımlarının eklendiği yerdir.input.value
ile input’’un değerine ulaşabilirsiniz.meta.error
ile input’a özgü hataya erişebilirsiniz.meta.touched
ile input’a tıklanıp tıklanmadığı durumunu alabilirsiniz.
Kod örneği:
Alt kısımda bulunan örneği yapalım.
Kodların Tamamı
İyi kodlamalar!
Twitter Hesabım
React Native ya da diğer sorularınız için
Kaynaklar