React ile Dinamik Form Oluşturma: Adım Adım Rehber

Web uygulamalarında kullanıcıdan veri almak için formlar kaçınılmazdır. Modern uygulamalarda ise, dinamik formlar sayesinde kullanıcıya göre özelleştirilebilir, esnek ve akıllı çözümler sunmak mümkün. React ile dinamik form geliştirmeye dair ihtiyacın olan her şey bu rehberde!

Neden Dinamik Form?

Dinamik formlar, kullanıcıdan alınacak alanların önceden belirlenmediği veya form yapısının değişebileceği durumlarda hayat kurtarır. Örneğin; bir anket uygulamasında, soru tipine göre farklı inputlar göstermek gerekebilir.

React ile Temel Dinamik Form Yapısı

Basit bir dinamik form oluşturmak için, form alanlarını bir dizi (array) olarak tanımlayıp React state üzerinde yönetebilirsin.

const [fields, setFields] = useState([{ name: '', value: '' }]);

Her yeni alan eklemede bu state’e yeni bir obje push’lanır. Alanların eklenmesi veya silinmesi kullanıcıya bırakılabilir.

Örnek Kod: Dinamik Form Alanı Ekleme

import React, { useState } from 'react';

function DynamicForm() {
  const [fields, setFields] = useState([{ value: '' }]);

  const handleChange = (index, event) => {
    const newFields = [...fields];
    newFields[index].value = event.target.value;
    setFields(newFields);
  };

  const handleAdd = () => {
    setFields([...fields, { value: '' }]);
  };

  return (
    <form>
      {fields.map((field, idx) => (
        <input
          key={idx}
          value={field.value}
          onChange={e => handleChange(idx, e)}
        />
      ))}
      <button type="button" onClick={handleAdd}>Alan Ekle</button>
    </form>
  );
}

React Hook Form ile Dinamik Form Yönetimi

React Hook Form kütüphanesi, karmaşık formları bile kolayca yönetmeni sağlar. Özellikle dinamik alanlarda performansı ve kolay kullanımı ile öne çıkar.

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

function HookFormDynamic() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: { items: [{ name: "" }] }
  });
  const { fields, append } = useFieldArray({
    control,
    name: "items"
  });

  return (
    <form>
      {fields.map((item, idx) => (
        <input key={item.id} {...register(`items.${idx}.name`)} />
      ))}
      <button type="button" onClick={() => append({ name: "" })}>Yeni Alan</button>
    </form>
  );
}

İpuçları ve En İyi Uygulamalar

• Validasyon eklemeyi unutma! Kullanıcıdan gelen her veriyi doğrula.
• Form state’ini sade tut, gereksiz re-render’ları önlemek için useCallback ve memo kullanabilirsin.
• İşlevsel ve sade tasarımlar için hazır UI bileşenleri kullanabilirsin (ör. Material UI, Ant Design).

Sonuç

React ile dinamik form geliştirmek, hem kullanıcı deneyimini hem de uygulamanın esnekliğini artırır. Bu rehberdeki örnekler ile kendi projelerinde kolayca dinamik formlar oluşturabilirsin!