React Hook Form Notları ve İpuçları

İçindekiler

1. Kurulum
2. Temel Kullanım
3. Form Doğrulama
4. Alan Dizileri
5. Alanları İzleme
6. Gönderim Yönetimi
7. Hata Yönetimi
8. Form Durumu
9. Özel Girdi Alanları
10. Koşullu Alanlar
11. Kullanıcı Arayüzü Kütüphaneleri ile Entegrasyon

Kurulum

React Hook Form'u yükleyin:

npm install react-hook-form

Temel Kullanım

React Hook Form ile temel form kurulumu:

import React from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit } = useForm();
  
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />
    </form>
  );
}

Form Doğrulama

Form alanlarına doğrulama ekleme:

import { useForm } from 'react-hook-form';

function ValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input 
        {...register("email", { 
          required: "Email gereklidir",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i,
            message: "Geçersiz e-posta adresi"
          }
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}
      
      <input 
        {...register("password", { 
          required: "Şifre gereklidir",
          minLength: {
            value: 8,
            message: "Şifre en az 8 karakter olmalıdır"
          }
        })}
      />
      {errors.password && <span>{errors.password.message}</span>}
      
      <input type="submit" />
    </form>
  );
}

Alan Dizileri

Dinamik form alanları ile çalışma:

import { useForm, useFieldArray } from 'react-hook-form';

function FieldArrayForm() {
  const { register, control, handleSubmit } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "items"
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.name`)} />
          <button type="button" onClick={() => remove(index)}>Sil</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: "" })}>Öğe Ekle</button>
      <input type="submit" />
    </form>
  );
}

Alanları İzleme

Form alanı değerlerini izleme:

import { useForm } from 'react-hook-form';

function WatchForm() {
  const { register, watch } = useForm();
  const watchShowAge = watch("showAge", false);
  
  return (
    <form>
      <input type="checkbox" {...register("showAge")} />
      {watchShowAge && (
        <input type="number" {...register("age")} />
      )}
    </form>
  );
}

Gönderim Yönetimi

Asenkron işlemlerle form gönderimini yönetme:

import { useForm } from 'react-hook-form';

function SubmissionForm() {
  const { register, handleSubmit, formState: { isSubmitting } } = useForm();
  
  const onSubmit = async (data) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Gönderiliyor...' : 'Gönder'}
      </button>
    </form>
  );
}

Hata Yönetimi

Detaylı hata yönetimi:

import { useForm } from 'react-hook-form';

function ErrorForm() {
  const { 
    register, 
    handleSubmit, 
    formState: { errors, isSubmitted } 
  } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: "Email gereklidir" })} />
      {isSubmitted && errors.email && <span>{errors.email.message}</span>}
      
      <input type="submit" />
    </form>
  );
}

Form Durumu

Form durumuna erişme ve kullanma:

import { useForm } from 'react-hook-form';

function StateForm() {
  const { 
    register, 
    handleSubmit, 
    formState: { 
      isDirty, 
      isSubmitting, 
      isSubmitted, 
      submitCount 
    } 
  } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("example")} />
      <p>Form kirli: {isDirty.toString()}</p>
      <p>Form gönderiliyor: {isSubmitting.toString()}</p>
      <p>Form gönderildi: {isSubmitted.toString()}</p>
      <p>Gönderim sayısı: {submitCount}</p>
      <input type="submit" />
    </form>
  );
}

Özel Girdi Alanları

Özel form girdi alanları oluşturma:

import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';

function CustomInputForm() {
  const { control } = useForm();

  return (
    <form>
      <Controller
        name="select"
        control={control}
        render={({ field }) => (
          <Select 
            {...field} 
            options={[              { value: 'chocolate', label: 'Çikolata' },              { value: 'strawberry', label: 'Çilek' },              { value: 'vanilla', label: 'Vanilya' }            ]} 
          />
        )}
      />
    </form>
  );
}

Koşullu Alanlar

Koşullu form alanları uygulama:

import { useForm } from 'react-hook-form';

function ConditionalForm() {
  const { register, watch } = useForm();
  const watchShowEmail = watch("showEmail", false);

  return (
    <form>
      <input type="checkbox" {...register("showEmail")} />
      {watchShowEmail && (
        <input {...register("email", { required: true })} />
      )}
    </form>
  );
}

Kullanıcı Arayüzü Kütüphaneleri ile Entegrasyon

Material-UI ile örnek:

import { useForm, Controller } from 'react-hook-form';
import { TextField, Button } from '@material-ui/core';

function MaterialUIForm() {
  const { control, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="textField"
        control={control}
        defaultValue=""
        rules={{ required: 'Bu alan gereklidir' }}
        render={({ field, fieldState: { error } }) => (
          <TextField
            {...field}
            label="Örnek"
            error={!!error}
            helperText={error ? error.message : null}
          />
        )}
      />
      <Button type="submit" variant="contained" color="primary">
        Gönder
      </Button>
    </form>
  );
}