REACT DOC SERIES
React Forms (Temel Konseptler)
Form ekranları her uygulamanın içerisinde bulunan temel girdi ekranlarıdır. Duruma göre dinamik oluşturulması, Doğrulama yapılması, Aynı formun bir kaç tane dolduran kontrolü, yetkilendirmesi gibi birçok durumu bulunur. Bu yazıda React Formları nasıl ele aldığını inceleyeceğiz.
Formlar Nasıl Çalışır ?
Bu kısımda aklıma gelen bir kaç modeli çizerek bu çalışma mantıklarını anlatmaya çalışacağım.
En basit akış aşağıdaki gibi bir senaryodur. Kullanıcı ekrandaki boşlukları doldurur.
- Eğer Cancel düğmesine basar ise ekranında önceki değerlerine(default) değerlerine döner
- Eğer OK düğmesine Basar ise önce doldurulması zorunlu, veya formatı içeriği doğrumu şeklinde veriyi Validate Eder, sonrasında istenilen yere aktarır.
Burada daha karmaşık çalışma mantıkları da olabilir. Sadece kullanıcı değil arka plandaki ekran sensör verisi ile sürekli güncelleniyor da olabilir. Bu durumda Kullanıcı etkileşiminde
- Ekrana sensörden gelen güncellemeyi durduracak bir switch mekanizmasına ihtiyaç duyulur.
- Kullanıcı Cancel düğmesine bastığında sensörün en güncel sensör verisini ekrana yansıtabilmelidir.
Daha bunun gibi bir çok konu Form ekranlarının sorunu Örneğin ;
- Duruma göre bazı field gizlenmesi veya disabled olması.
- Yetkilendirmeye göre içeriğe erişim.
- Otomatik kaydetme ve kaldığın yerden devam edebilme
- Farklı dil destekleri i18n
- Alanlara girerken belli regex ve formatter olması
- Formların Dinamik olarak oluşturulabilmesi
- Form Girdilerinin Parçalara bölünerek Wizard yapısında alınması
gibi bir çok ihtiyacınız olabilir. Bu gereksinimleri React direk karşılamanız için size hazır bir kütüphane vermez. Gereksinimleri kendiniz gerçekleştirmeniz gerekiyor veya 3rd Party Formik gibi Form Kütüphanesinden faydalanabilirsiniz.
Biz gelelim React Form işlemleri en temelde nasıl yapılıyor. 2 tip form yapısı bulunuyor Controlled & Uncontrolled Components ve Form yapıları.
Aşağıdaki örnek üzerinden durumu anlatırsak.
Controlled Components React LifeCycle (Yaşam Döngüsü) içerisinde bileşenler 2 temel yapının güncellenmesi ile tekrar render edilirler (state ve dışarıdan gelen props). Eğer bileşenlerin değerleri bileşenin State veya üst Ağaçlarında State tutuluyor ve props üzerinden kullanılıyorsa bu tür Form/Bileşenlere Controlled Bileşen denir.
Aşağıdaki Text alanındaki değişiklik sürekli olarak bileşen State aktarılarak bu state üzerinden yönetiliyor. Bundan dolayı bu bileşen Controlled Formdur
Bunun aksine siz Text alanındaki değişikliği State olarak tutmuyorsanız. Kullanıcı formu submit ettiğinde direk o Text DOM ref içerisindeki değeri kullanıyorsanız bu durumda Uncontrolled Formdur.
Uncontrolled Form bileşenlerinde Text alanın DOM referansından faydalanmak için React.createRef() gerçek elemana erişip, eleman üzerinden veriye erişim sağlanır. el.current.value gibi kullanabilirsiniz
Burda bir diğer önemli hususta value değeri bileşene verildiğinde VDOM → DOM aktarılacağı ve sürekli veri değiştirilemez olacağından, eğer ilgili girdi alanın bir default değeri var ise bu defaultValue ile atayarak mevcut verinin 1 sefer bu değeri almasını sağlayabilirsiniz.
Burda işleri biraz daha karmaşıklaştırıp Checkbox, Password, Input ve Select gibi bileşenleri Form içerisinde kullanmak istersek. Bu bileşenlerin yapısı neredeyse birbiri ile aynı ve aynı mantıkta çalışır. Aşağıdaki örnekten durumu inceleyebilirsiniz.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
