Formik Notları ve İpuçları

Formik, form geliştirmenin en can sıkıcı üç kısmıyla ilgilenen popüler bir React form kütüphanesidir: değerleri form durumuna alıp çıkarma, doğrulama ve hata mesajları, ve form gönderimini işleme. Bu kopya kağıdı, yaygın olarak kullanılan Formik kavramları ve bileşenlerinin bir özetini sunar.

İçindekiler

1. Temel Kullanım
2. Formik Bileşenleri
3. Form Gönderimi
4. Doğrulama
5. Hata İşleme
6. Alan Dizileri
7. useFormik Hook'u
8. İpuçları ve Püf Noktaları

Temel Kullanım

import React from 'react';
import { Formik, Form, Field } from 'formik';

const TemelForm = () => (
  <Formik
    initialValues={{ email: '', şifre: '' }}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field type="email" name="email" />
        <Field type="password" name="şifre" />
        <button type="submit" disabled={isSubmitting}>
          Gönder
        </button>
      </Form>
    )}
  </Formik>
);

Formik Bileşenleri

Formik

<Formik
  initialValues={{ /* başlangıç form değerleri */ }}
  validationSchema={/* Yup şeması */}
  onSubmit={(values, actions) => {
    // Form gönderimini işle
  }}
>
  {/* Form içeriği */}
</Formik>

Form

<Form>
  {/* Form alanları */}
</Form>

Field

<Field type="text" name="ad" />
<Field as="textarea" name="biyografi" />
<Field as="select" name="renk">
  <option value="kırmızı">Kırmızı</option>
  <option value="yeşil">Yeşil</option>
  <option value="mavi">Mavi</option>
</Field>

ErrorMessage

<ErrorMessage name="email" component="div" />

Form Gönderimi

<Formik
  onSubmit={(values, { setSubmitting }) => {
    // Gönderim mantığı burada
    setSubmitting(false);
  }}
>
  {({ isSubmitting }) => (
    <Form>
      {/* Form alanları */}
      <button type="submit" disabled={isSubmitting}>
        Gönder
      </button>
    </Form>
  )}
</Formik>

Doğrulama

Yup ile

import * as Yup from 'yup';

const doğrulamaŞeması = Yup.object().shape({
  email: Yup.string().email('Geçersiz email').required('Zorunlu'),
  şifre: Yup.string().min(8, 'Çok Kısa!').required('Zorunlu'),
});

<Formik
  validationSchema={doğrulamaŞeması}
  // ...
>
  {/* ... */}
</Formik>

Manuel Doğrulama

<Formik
  validate={values => {
    const hatalar = {};
    if (!values.email) {
      hatalar.email = 'Zorunlu';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)) {
      hatalar.email = 'Geçersiz email adresi';
    }
    return hatalar;
  }}
  // ...
>
  {/* ... */}
</Formik>

Hata İşleme

<Formik
  // ...
>
  {({ errors, touched }) => (
    <Form>
      <Field type="email" name="email" />
      {errors.email && touched.email ? <div>{errors.email}</div> : null}
      {/* ... */}
    </Form>
  )}
</Formik>

Alan Dizileri

import { FieldArray } from 'formik';

<Formik
  initialValues={{ arkadaşlar: [''] }}
  // ...
>
  {({ values }) => (
    <Form>
      <FieldArray name="arkadaşlar">
        {({ insert, remove, push }) => (
          <div>
            {values.arkadaşlar.length > 0 &&
              values.arkadaşlar.map((arkadaş, index) => (
                <div key={index}>
                  <Field name={`arkadaşlar.${index}`} />
                  <button type="button" onClick={() => remove(index)}>X</button>
                </div>
              ))}
            <button type="button" onClick={() => push('')}>
              Arkadaş Ekle
            </button>
          </div>
        )}
      </FieldArray>
    </Form>
  )}
</Formik>

useFormik Hook'u

import { useFormik } from 'formik';

const Formum = () => {
  const formik = useFormik({
    initialValues: { email: '' },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <button type="submit">Gönder</button>
    </form>
  );
};

İpuçları ve Püf Noktaları

Formu Sıfırlama

<Formik
  // ...
  onSubmit={(values, { resetForm }) => {
    // Gönderim mantığı
    resetForm();
  }}
>
  {/* ... */}
</Formik>

Koşullu Alanlar

<Formik
  // ...
>
  {({ values }) => (
    <Form>
      <Field type="checkbox" name="toggle" />
      {values.toggle && (
        <Field type="text" name="koşulluAlan" />
      )}
    </Form>
  )}
</Formik>

Özel Giriş Bileşeni

const ÖzelGiriş = ({ field, form, ...props }) => {
  return <input {...field} {...props} />;
};

<Field name="alanım" component={ÖzelGiriş} />

Formik Bağlamına Erişim

import { useFormikContext } from 'formik';

const GönderDüğmesi = () => {
  const { isSubmitting } = useFormikContext();
  return (
    <button type="submit" disabled={isSubmitting}>
      Gönder
    </button>
  );
};