Birden çok alan
- React kursu
- Başlangıç
- Ders 51/84
- 4 dk
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.
Başlangıç kodu
import { useState } from "react";
// SignupForm bileşenini buraya tanımlaÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İki alanı tutmanın en temiz yolu nedir?
Object state updates with spread.- tek nesne useState Doğru cevap
- iki ayrı prop
- İki ayrı useState
- global değişken
Açıklama: İlişkili alanlar tek nesnede toplanır.
2 Birden çok alan: eksik parçayı tamamla
setForm(f => ({ ...f, email: ____ }))setForm(f => ({ ...f, email: e.target.value }))Açıklama: email alanını güncel metinle yazdın.
3 Birden çok alan: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
name özniteliği |
Alan adı |
[e.target.name] |
Hesaplanan özellik |
...f |
Eski alanlar |
setForm |
Nesne güncelleyici |