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 olursa onSubmit 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

JavaScript is not available.

React Native ya da diğer sorularınız için

burhanyilmaz/reactnative-forum

Kaynaklar

final-form/react-final-form

Final Form Docs - Getting Started