React ile Form İşlemlerinin Yönetilmesi
Form işlemlerinin yönetilmesi hem Web tarafında hem de Mobil tarafta geliştirme yapanlar için oldukça uğraştırıcı bir hal alabiliyor. Bunun temel nedeni ise kullanıcı ile doğrudan etkileşim halinde olunan yegane alanlardan bir tanesi olması denilebilir. Bu süreçlerin sorunsuz yönetilmesi adına bir çok kütüphane ve hazır yapı mevcut. Kullanım açısından işlemleri kolaylaştırsa da süreçler hakkında bazı noktalara dair farkındalık kazanmamız gerekli olabiliyor 3.parti bir araç ile işleri yürütmeye çalıştığımızda.
Form işlemlerini aşama aşama listeleyecek olursak.
- Veri alınacak yapının oluşturulması(form ve input alanı)
- Kullanıcıdan alınan verinin uygulama içinde tutulması(onChange - setState)
- Alınan verinin istenen biçimde olup olmadığının kontrolü ve uyarı mesajının bu duruma göre oluşturulması.(Validation-Error Handling)
- Veri işleminin şartları sağladığında kabul durumunun tetiklenmesi(onSubmit)
Temel yapı olarak incelediğimizde form işlem süreçlerinin bu dört madde ile tanımlandığına şahit oluruz. Ayrıca bakınız(onBlur,onFocus,Pristine).
Bu doğrultuda bu aşamaları dikkate alarak örnek bir React uygulaması gerçeklemeye çalışacağım.
- Form Veri Giriş Alanlarının Oluşturulması
Örneğimizde her hangi bir API’den veri alışverişi yapmayacağız. Dolayısıyla kendi oluşturduğum veri ile soru tiplerine göre veri giriş alanlarını oluşturuyorum.
Data klasörü içerisinde bulunan veriye göre bileşenler ‘map’ fonksiyonu ile oluşturuldu.
2.Veri Değişim işlemlerinin Yönetilmesi
‘onChange’ input bileşini içerisinde tutulan değerin değişimini tetiklemek için kullanılan bir özelliktir. ‘useState’ ile tanımlanan input değerleri kontrollü olarak tutulur hale getirildi. Her iki bileşende ki değişimi yönetecek fonksiyonlar aracılığıyla işlemler yönetildi.
3. Doğrulama İşleminin Yönetilmesi
Çok farklı biçimde doğrulama(validation) işlemleri ile karşılaşmak form işlemleri yönetirken olağan bir durumdur. Biz örneğimizde cevap verilmesi zorunlu tutulan bir soru ile (isRequired) işlemimizin geçerliliğini doğrulamayı gerekli tuttuk.
4. Form Onaylama İşleminin Yönetilmesi
Form bileşenine ait ‘onSubmit’ özelliği ile form submit edilir. Form içerisinde bu işlemi yapacak butonun tipi ‘submit’ olarak atanır. Biz elde ettiğimiz verileri konsola yazdık ancak veri bu aşamada istenilen hedefe yönlendirilebilir.
Sonuç Olarak;
Form işlemlerinde kullanılan temel işlemleri aşamalı olarak basit bir örnek ile incelemiş olduk. Bu işlemleri yönetmemizi sağlayan oldukça gelişmiş kütüphaneler bulunmaktadır. Bu örnek çerçevesinde temel amacım süreçlere olan hakimiyetinizi biraz olsun artırmaktı.
Projenin Github Bağlantısı:
Projeyi Görüntüleme Bağlantısı:
