📌 React Hook Form – Temel Kullanım ve Doğrulamalar

React Hook Form, form yönetimi ve doğrulamalar için hafif ve performanslı bir kütüphanedir. Form verilerini kolayca yönetmenizi, doğrulamaları basit bir şekilde eklemenizi sağlar ve kontrol edilen input gerektirmez.

1️⃣ useForm ile Form Kontrolü

useForm hook’u, formu yönetmek için gerekli fonksiyonları sağlar: register, handleSubmit, reset, getValues ve formState.

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

const { register, handleSubmit, reset, getValues, formState } = useForm({
  defaultValues: isEditSession ? editValues : {},
});

• register: Input alanlarını form yönetimine bağlar.
• handleSubmit: Form gönderiminde verileri alır ve onSubmit fonksiyonunu çalıştırır.
• reset: Formu sıfırlar veya önceden doldurur.
• getValues: Formdaki mevcut değerleri alır.
• defaultValues: Düzenleme modunda formu önceden doldurmak için kullanılır.

2️⃣ Form Gönderim İşlemi

handleSubmit fonksiyonu ile form gönderimi yönetilir. onSubmit fonksiyonu form verilerini parametre olarak alır.

const { register, handleSubmit } = useForm();

function onSubmit(data) {
  console.log(data);
}

<Form onSubmit={handleSubmit(onSubmit)}>
  {/* Input alanları */}
</Form>

• Form gönderildiğinde, veriler data olarak onSubmit fonksiyonuna iletilir.

3️⃣ register ile Alan Kaydı

Input alanlarını form sistemine kaydetmek için register kullanılır.

<Input type="text" id="name" {...register("name")} />