• 0216 488 01 91
  • destek@sonsuzbilgi.com.tr

React ve Formik İle Form Alanlarının Yönetimi

Ankara Plaket İmalatı
Tüm Plaket ihtiyaçlarınız için Buradayız!

Kristal, Ahşap, Bayrak.. Plaket ihtiyaçlarınıza Mükemmel çözümler üretiyoruz.

React ve Formik İle Form Alanlarının Yönetimi

Adı : React ve Formik İle Form Alanlarının Yönetimi

Günümüzde web uygulamaları giderek karmaşık hale gelmektedir. Birçok farklı form alanı bulunan ve kullanıcının girdiği verilerin doğruluğunu kontrol etmeniz gereken uygulamalar ile uğraşmak zorunda kalabilirsiniz. Bu noktada React ve Formik gibi kütüphaneler devreye girerek, web uygulamalarınızda form alanlarını daha kolay ve etkili bir şekilde yönetmenizi sağlar.

React, web uygulamalarınızı daha etkili ve performanslı bir şekilde geliştirmenizi sağlayan bir kütüphanedir. Formik ise React uygulamalarınızdaki formların yönetimini daha kolay hale getiren bir kütüphanedir. Formik, standart React form yönetiminden daha gelişmiş seçenekler sunar ve form alanlarını kontrol etmek için özelleştirilebilir bileşenler sağlar. Bu yazıda, React ve Formik ile form alanlarının nasıl yönetilebileceği konusunu ayrıntılı bir şekilde ele alacağız.

Form Alanlarının Oluşturulması

React ve Formik ile form alanlarını yönetmek kolaydır. İlk olarak, form alanlarınızı belirli bir veri yapısı kullanarak oluşturmanız gerekir. Form alanlarının birçok farklı tipi vardır, ancak burada en yaygın olanları ele alacağız: input, textarea, select ve checkbox.

Input Alanları

Input alanları, kullanıcılardan tek bir satırlık metin girmelerini isteyecek şekilde oluşturulur. Bunlar genellikle e-posta adresleri, şifreler, kullanıcı adları ve benzeri verileri almak için kullanılır. Input alanları, HTML5'in yeni özellikleri sayesinde, doğrulama, maksimum uzunluk sınırı, minimum ve maksimum değerler ve daha birçok özellikle donatılabilir.

Textarea Alanları

Textarea alanları, kullanıcılardan çok satırlı metin girmelerini isteyecek şekilde oluşturulur. Bu alanlar genellikle müşteri yorumları, açıklama ve diğer uzun form girdileri için tercih edilir. Textarea alanları, HTML5'in doğrulama özellikleri ile birlikte kullanılabilir.

Select Alanları

Select alanları, kullanıcılardan sınırlı sayıda seçenek arasından seçim yapmalarını isteyecek şekilde oluşturulur. Bu alanlar genellikle formlarda \"Cinsiyet\" veya \"Ülke\" gibi sorular için kullanılır. Select alanları, belirli bir öğe seçildiğinde diğer alanların görünürlüğünü değiştirme vb. Özelliklerle birlikte kullanılabilir.

Checkbox Alanları

Checkbox alanları, kullanıcılardan katılım, kabul, reddetme veya herhangi bir tercih gibi belirli bir seçenek grubunu seçmelerini isteyecek şekilde oluşturulur. Checkbox alanları, \"Lisans Sözleşmesi\" gibi öğeler için kullanılır.

Formik Kullanarak Form Alanlarının Yönetimi

React ve Formik, form alanlarınızdan gelen verileri daha kolay bir şekilde yönetmenizi sağlar. Formik, doğrudan React bileşenlerine dahil edilebilir ve daha iyi bir kod okunabilirliği için context API kullanır. Formik, formlarda önemli bir yere sahiptir ve bazı özellikleri şunlardır:

-Formun kontrolü tamamen Formik'e teslim edilebilir: Kimlik doğrulama, form gönderildikten sonra hata mesajları, form elemanlarının durumlarının kontrol edilmesi, vb.

-Form elemanları, kodlar ve bileşenler arasında paylaşılır.

-Formun yönetimi, iş mantığı ve görüntüleme ayrı ayrı ele alınabilir.

-Önemli özelliklerle doludur.

Formik'in Başlatılması

Formik, bir fonksiyonlar grubu ve bir bileşenler grubu olmak üzere iki ana bölümden oluşur. Formik'in içinde çalışacak olan bileşenlerin tamamı, bir form üzerinde kullanılacak olan elemanların doğru yapılandırılmış şekilde Formik'in içinde tanımlanması ile oluşturulur.

Formik ile bir form alanı oluşturmak için aşağıdakileri yapmanız gerekir:

- Formik'i içe aktarın.
- Formik bileşenini oluşturun.
- Form alanlarını oluşturun.

Formik'i Dahil Etme

Formik dahil etmek oldukça basittir. Formik, npm üzerinde yayınlandığından, Formik'in oluşturulması ve dahil edilmesi için şu komutu çalıştırın:

```npm install formik```

Bileşenleri Oluşturma

Bileşenlerin oluşturulması, formları doldurmak için kullanacağınız temel elemanları oluşturmanızla başlar. Aşağıdaki örnekte, bir form alanı oluşturmak için bir `````` öğesi kullanılmıştır:

```
import { Formik, Field, Form, ErrorMessage } from 'formik';

initialValues={{ name: '', email: '', password: '' }}
onSubmit={values => {
console.log(values);
}}
>
{({ errors, touched }) => (





{errors.name && touched.name ? (
{errors.name}

) : null}




{errors.email && touched.email ? (
{errors.email}

) : null}




{errors.password && touched.password ? (
{errors.password}

) : null}



)}

```

Burada, önemli olan şey Formik bileşenini oluşturmak ve Form bileşenini kullanarak formları doldurmak için `````` a çocuklar eklemektir. Her bir `````` öğesi bir form elemanını temsil eder ve name prop'u, elemanın Formik ile etkileşimini yönetmek için kullanılır.

Yukarıdaki örnekte, 3 farklı form elemanı oluşturulmuştur. Bunlar:

-Name input'u
-Email input'u
-Password input'u

`````` öğeleri, bir ```name``` ve bir iki adet prop alır (ve değerlerinin Formik tarafından yönetildiğinin farkında olmalısınız), ```type```, ```placeholder``` veya ```required```'ı bu alanlardan birinde kullanabilirsiniz. Eğer bir tane şekilde ```type``` kullanırsanız, Formik, bu alanın tipini otomatik olarak saptayacaktır.

Ayrıca, `````` bileşenini göstermek de önemlidir. Bu bileşen, herhangi bir hatayla bağlantılı olarak görüntülenecek uyarıları yönetir. Bileşen, bir `````` bileşeninde belirtilen hataları görüntülemeden önce gösterilir.

Formu Gönderme

Form alanlarınızı ve form elemanlarınızı oluşturduktan sonra, formu göndermek için bir submit fonksiyonu eklemeniz gerekir. Bu işlem için, Formik bileşenine bir ```onSubmit``` prop'u ekleyerek yapabilirsiniz.

Aşağıdaki örnekte, form verilerine bir konsol logu yazdırmak için basit bir submit fonksiyonu oluşturulmuştur:

```
import { Formik, Field, Form, ErrorMessage } from 'formik';

initialValues={{ name: '', email: '', password: '' }}
onSubmit={values => {
console.log(values);
}}
>
{(errors, { handleSubmit }) => (












)}

```

Burada belirtildiği gibi, bir submit fonksiyonu oluşturmak oldukça kolaydır:

-Form ikili argümanları, form değerlerini içeren bir nesne ve bir callback fonksiyonu döndürür.
-Kodunuzda Formik'in kullanımına devam edebilirsiniz.

Formu Validasyon

Form alanlarını doğrulamanın yolu, API'si sayesinde sağlanır, bu API bir form elemanının doğruluğunu değerlendirmek için test edebileceğiniz bazı özellikler vermekte. Formik API'si, sıfır veya daha fazla Doğrulama Şeması veya 1 veya daha fazla Doğrulama Şeması dizisiyle sağlanır. Aşağıda, Formik ile form alanlarını doğrulamak için kullanacağınız birkaç temel doğrulama şemasının özeti verilmiştir:

-Yok: Bu, herhangi bir doğrulama yapmayacağınız anlamına gelir.
-Library: Bu, ReactDOM'ye dahil edilmiş validation davranışlarını kullanmanıza olanak tanır.
-Shape: Bu, form alanlarınızda girdiğiniz verileri doğrulamanıza olanak tanır.

Burada, form alanlarındaki verileri doğrulamak için yalnızca durum yükledim. Aşağıda kod satırının çalışma sonucunu gösteren forma ait görüntüyü inceleyebilirsiniz.

```
import { Formik, Field, Form, ErrorMessage } from 'formik';

function App() {
return (
initialValues={{ firstName: '', lastName: '', email: '' }}
validate={values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'First name required';
}
if (!values.lastName) {
errors.lastName = 'Last name required';
}
if (!values.email) {
errors.email = 'Email required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);

React ve Formik İle Form Alanlarının Yönetimi

Adı : React ve Formik İle Form Alanlarının Yönetimi

Günümüzde web uygulamaları giderek karmaşık hale gelmektedir. Birçok farklı form alanı bulunan ve kullanıcının girdiği verilerin doğruluğunu kontrol etmeniz gereken uygulamalar ile uğraşmak zorunda kalabilirsiniz. Bu noktada React ve Formik gibi kütüphaneler devreye girerek, web uygulamalarınızda form alanlarını daha kolay ve etkili bir şekilde yönetmenizi sağlar.

React, web uygulamalarınızı daha etkili ve performanslı bir şekilde geliştirmenizi sağlayan bir kütüphanedir. Formik ise React uygulamalarınızdaki formların yönetimini daha kolay hale getiren bir kütüphanedir. Formik, standart React form yönetiminden daha gelişmiş seçenekler sunar ve form alanlarını kontrol etmek için özelleştirilebilir bileşenler sağlar. Bu yazıda, React ve Formik ile form alanlarının nasıl yönetilebileceği konusunu ayrıntılı bir şekilde ele alacağız.

Form Alanlarının Oluşturulması

React ve Formik ile form alanlarını yönetmek kolaydır. İlk olarak, form alanlarınızı belirli bir veri yapısı kullanarak oluşturmanız gerekir. Form alanlarının birçok farklı tipi vardır, ancak burada en yaygın olanları ele alacağız: input, textarea, select ve checkbox.

Input Alanları

Input alanları, kullanıcılardan tek bir satırlık metin girmelerini isteyecek şekilde oluşturulur. Bunlar genellikle e-posta adresleri, şifreler, kullanıcı adları ve benzeri verileri almak için kullanılır. Input alanları, HTML5'in yeni özellikleri sayesinde, doğrulama, maksimum uzunluk sınırı, minimum ve maksimum değerler ve daha birçok özellikle donatılabilir.

Textarea Alanları

Textarea alanları, kullanıcılardan çok satırlı metin girmelerini isteyecek şekilde oluşturulur. Bu alanlar genellikle müşteri yorumları, açıklama ve diğer uzun form girdileri için tercih edilir. Textarea alanları, HTML5'in doğrulama özellikleri ile birlikte kullanılabilir.

Select Alanları

Select alanları, kullanıcılardan sınırlı sayıda seçenek arasından seçim yapmalarını isteyecek şekilde oluşturulur. Bu alanlar genellikle formlarda \"Cinsiyet\" veya \"Ülke\" gibi sorular için kullanılır. Select alanları, belirli bir öğe seçildiğinde diğer alanların görünürlüğünü değiştirme vb. Özelliklerle birlikte kullanılabilir.

Checkbox Alanları

Checkbox alanları, kullanıcılardan katılım, kabul, reddetme veya herhangi bir tercih gibi belirli bir seçenek grubunu seçmelerini isteyecek şekilde oluşturulur. Checkbox alanları, \"Lisans Sözleşmesi\" gibi öğeler için kullanılır.

Formik Kullanarak Form Alanlarının Yönetimi

React ve Formik, form alanlarınızdan gelen verileri daha kolay bir şekilde yönetmenizi sağlar. Formik, doğrudan React bileşenlerine dahil edilebilir ve daha iyi bir kod okunabilirliği için context API kullanır. Formik, formlarda önemli bir yere sahiptir ve bazı özellikleri şunlardır:

-Formun kontrolü tamamen Formik'e teslim edilebilir: Kimlik doğrulama, form gönderildikten sonra hata mesajları, form elemanlarının durumlarının kontrol edilmesi, vb.

-Form elemanları, kodlar ve bileşenler arasında paylaşılır.

-Formun yönetimi, iş mantığı ve görüntüleme ayrı ayrı ele alınabilir.

-Önemli özelliklerle doludur.

Formik'in Başlatılması

Formik, bir fonksiyonlar grubu ve bir bileşenler grubu olmak üzere iki ana bölümden oluşur. Formik'in içinde çalışacak olan bileşenlerin tamamı, bir form üzerinde kullanılacak olan elemanların doğru yapılandırılmış şekilde Formik'in içinde tanımlanması ile oluşturulur.

Formik ile bir form alanı oluşturmak için aşağıdakileri yapmanız gerekir:

- Formik'i içe aktarın.
- Formik bileşenini oluşturun.
- Form alanlarını oluşturun.

Formik'i Dahil Etme

Formik dahil etmek oldukça basittir. Formik, npm üzerinde yayınlandığından, Formik'in oluşturulması ve dahil edilmesi için şu komutu çalıştırın:

```npm install formik```

Bileşenleri Oluşturma

Bileşenlerin oluşturulması, formları doldurmak için kullanacağınız temel elemanları oluşturmanızla başlar. Aşağıdaki örnekte, bir form alanı oluşturmak için bir `````` öğesi kullanılmıştır:

```
import { Formik, Field, Form, ErrorMessage } from 'formik';

initialValues={{ name: '', email: '', password: '' }}
onSubmit={values => {
console.log(values);
}}
>
{({ errors, touched }) => (





{errors.name && touched.name ? (
{errors.name}

) : null}




{errors.email && touched.email ? (
{errors.email}

) : null}




{errors.password && touched.password ? (
{errors.password}

) : null}



)}

```

Burada, önemli olan şey Formik bileşenini oluşturmak ve Form bileşenini kullanarak formları doldurmak için `````` a çocuklar eklemektir. Her bir `````` öğesi bir form elemanını temsil eder ve name prop'u, elemanın Formik ile etkileşimini yönetmek için kullanılır.

Yukarıdaki örnekte, 3 farklı form elemanı oluşturulmuştur. Bunlar:

-Name input'u
-Email input'u
-Password input'u

`````` öğeleri, bir ```name``` ve bir iki adet prop alır (ve değerlerinin Formik tarafından yönetildiğinin farkında olmalısınız), ```type```, ```placeholder``` veya ```required```'ı bu alanlardan birinde kullanabilirsiniz. Eğer bir tane şekilde ```type``` kullanırsanız, Formik, bu alanın tipini otomatik olarak saptayacaktır.

Ayrıca, `````` bileşenini göstermek de önemlidir. Bu bileşen, herhangi bir hatayla bağlantılı olarak görüntülenecek uyarıları yönetir. Bileşen, bir `````` bileşeninde belirtilen hataları görüntülemeden önce gösterilir.

Formu Gönderme

Form alanlarınızı ve form elemanlarınızı oluşturduktan sonra, formu göndermek için bir submit fonksiyonu eklemeniz gerekir. Bu işlem için, Formik bileşenine bir ```onSubmit``` prop'u ekleyerek yapabilirsiniz.

Aşağıdaki örnekte, form verilerine bir konsol logu yazdırmak için basit bir submit fonksiyonu oluşturulmuştur:

```
import { Formik, Field, Form, ErrorMessage } from 'formik';

initialValues={{ name: '', email: '', password: '' }}
onSubmit={values => {
console.log(values);
}}
>
{(errors, { handleSubmit }) => (












)}

```

Burada belirtildiği gibi, bir submit fonksiyonu oluşturmak oldukça kolaydır:

-Form ikili argümanları, form değerlerini içeren bir nesne ve bir callback fonksiyonu döndürür.
-Kodunuzda Formik'in kullanımına devam edebilirsiniz.

Formu Validasyon

Form alanlarını doğrulamanın yolu, API'si sayesinde sağlanır, bu API bir form elemanının doğruluğunu değerlendirmek için test edebileceğiniz bazı özellikler vermekte. Formik API'si, sıfır veya daha fazla Doğrulama Şeması veya 1 veya daha fazla Doğrulama Şeması dizisiyle sağlanır. Aşağıda, Formik ile form alanlarını doğrulamak için kullanacağınız birkaç temel doğrulama şemasının özeti verilmiştir:

-Yok: Bu, herhangi bir doğrulama yapmayacağınız anlamına gelir.
-Library: Bu, ReactDOM'ye dahil edilmiş validation davranışlarını kullanmanıza olanak tanır.
-Shape: Bu, form alanlarınızda girdiğiniz verileri doğrulamanıza olanak tanır.

Burada, form alanlarındaki verileri doğrulamak için yalnızca durum yükledim. Aşağıda kod satırının çalışma sonucunu gösteren forma ait görüntüyü inceleyebilirsiniz.

```
import { Formik, Field, Form, ErrorMessage } from 'formik';

function App() {
return (
initialValues={{ firstName: '', lastName: '', email: '' }}
validate={values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'First name required';
}
if (!values.lastName) {
errors.lastName = 'Last name required';
}
if (!values.email) {
errors.email = 'Email required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);


Danışmanlık Web Sitesi
Onlarca Danışmanlık Web Sitesinden Biri Mutlaka Size Göre!

*256 Bit SSL Sertifikası * Full Mobil Uyumlu * Full SEO Uyumlu
İsterseniz Mobil Uygulama Seçeneğiyle
React form yönetimi Formik kütüphanesi form alanları otomatik validasyon form işleme handleSubmit fonksiyonu initialValues özelliği Field bileşenleri
İlgili Yazılar

E-Ticaret Premium
Basit, Hızlı, Etkili ve Mükemmel bir E-Ticaret Siteniz Olsun

*256 Bit SSL Sertifikası * Full Mobil Uyumlu * Full SEO Uyumlu
İsterseniz Mobil Uygulama Seçeneğiyle