Birden çok alan

Aynı state ile birden çok form alanını yönetmeyi öğrenirsin.

Birden çok alan

İki veya üç alanı yönetmenin en temiz yolu tek bir nesne state'tir: const [form, setForm] = useState({name: "", email: ""}).

Tek bir handleChange yazıp alan adını kullanarak güncellersin. Bu, kod tekrarını azaltır.

İleride React Hook Form bu yaklaşımı otomatikleştirir; şimdilik temeli öğreniyoruz.

Tek handler yaklaşımı

Her input'a name özniteliği verip tek handler'da alan adına göre güncellersin: setForm(f => ({...f, [e.target.name]: e.target.value})).

Burada [e.target.name] hesaplanan özelliktir (computed property); adı dinamik olarak belirler. Bu yazımı ileride göreceğiz.

Bu yaklaşım, on alanlı bir formda bile tek handler yeterli kılar.

Uygulama İki alanlı form

Aşağıdaki iskeleti tamamla. SignupForm bileşeni yaz; useState'i içe aktar. const [form, setForm] = useState({name: "", email: ""}); tanımla. <form> içinde iki input döndür: biri value={form.name}, diğeri value={form.email}. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function SignupForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  return <form><input value={form.name} /><input value={form.email} /></form>;
}

export default SignupForm;

Kendini test et

İki alanı tutmanın en temiz yolu nedir?
```
Object state updates with spread.
```
- tek nesne useState
- iki ayrı prop
- İki ayrı useState
- global değişken
Cevabı göster

tek nesne useState — İlişkili alanlar tek nesnede toplanır.

Birden çok alan: eksik parçayı tamamla

setForm(f => ({ ...f, email: ____ }))

Cevabı göster

setForm(f => ({ ...f, email: e.target.value }))

Birden çok alan: kavramları eşleştir

name özniteliği

Alan adı
[e.target.name]

Hesaplanan özellik
...f

Eski alanlar
setForm

Nesne güncelleyici

Sıradaki ders: Özet - Formlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler