Formik İle Form Hazırlama: Örnekler, İpuçları ve Püf Noktaları

Adı : Formik İle Form Hazırlama: Örnekler, İpuçları ve Püf Noktaları

Formlar web sitelerindeki kullanıcı etkileşimlerinin en önemli parçasıdır. İşlevsellikleri nedeniyle kullanıcıların gözünde büyük bir önem taşırlar. Bir web uygulamasında kullanıcılarla etkileşim kurmak, süreçleri yönetmek ve girdi almak için birçok form kullanılır. Formik yalnızca React için yapılır ve bu React uygulamalarındaki formların ele alınmasını sağlar.

Formik, sıradan bir form yönetim kütüphanesinden çok daha fazlasıdır. Basit bir arayüzle, arka plandaki zorlu forma temsil etme ve temas bölümlerini organize etme işlevlerini yürütür. Formik, devam eden bir etkinlik gibi form işlemlerini kolaylaştıran bir düzenleme şekli sunar. Bu sayede yazılımcılar, zaman ve enerjiden tasarruf edebilirler.

Formik’in Kullanımı

Formik, basit bir form yapmak için kullanılamaz, ancak daha zorlu formları yönetmek için kullanılabilir. Formik kullanarak bir form oluşturmak, Reddit veya Airbnb gibi popüler web sitelerinde görmeye alışık olduğumuz dinamik bir form tasarımı yapmak anlamına gelir.

Formik kullanmak, daha büyük form oluşturma aşamalarında özellikle yararlıdır. Yönetim, işlem denetimi, basit girdi validasyonu veya depolama yönetimi gibi özellikler sunar. Formik sayesinde, birden fazla parçadan oluşan bir form oluşturulabilirken, bu forma sahip verilerin saklanması da sağlanabilir.

Öğeler

Formik içindeki öğe ana öğe formu ile sınırlı değildir. Form içindeki her öğe bileşeni tarafından oluşturulabilir. Formik, formun parçalarındaki kaliteli verileri yönetmek için tasarlandığından, herhangi bir öğe bileşeni içeriğinde muhafaza edilir. Aynı zamanda, validasyonlar ve hata mesajları gibi birçok farklı özellik sunar.

Örnekler

Aşağıda, birçoğumuzun aşina olduğu bir formdan örneklere bakacağız. Bu, bir kullanıcının kullanıcı adı ve şifrelerini doğrulama amacıyla bir \"Giriş\" formudur:

import React from 'react';import { Formik, Form, Field, ErrorMessage } from 'formik';import * as Yup from 'yup';import { Link } from 'react-router-dom';

const validationSchema = Yup.object().shape({ username: Yup.string() .min(3, \"Minimum 3 karakter uzunluğunda olmalıdır.\") .max(15, \"Maksimum 15 karakter uzunluğunda olmalıdır.\") .required(\"Kullanıcı adı boş bırakılamaz.\"), password: Yup.string() .min(8, \"Minimum 8 karakter uzunluğunda olmalıdır.\") .required(\"Şifre boş bırakılamaz.\")})

const LoginForm = () => { return ( { await new Promise(resolve => setTimeout(resolve, 500)); alert(JSON.stringify(values, null, 2)); resetForm(); setSubmitting(false); }} > {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (