Özet - Formlar
- React kursu
- Başlangıç
- Ders 52/84
- 5 dk
İsimalanı girişi olan kısa bir iletişim formu yazarsın.
Özet - Formlar
Bu grupta React formlarını öğrendin. Kontrollü input, value'su state'e bağlıdır; onChange her tuşta state'i günceller. Tek doğru kaynak state'tir.
Form gönderiminde onSubmit ve e.preventDefault() kullanılır. Birden çok alan tek nesne state + spread ile yönetilir.
İleride React Hook Form ile bu yükü azaltacağız; şimdilik temel yaklaşımlar yeter.
Uygulama Form özet görevi
Aşağıdaki iskeleti tamamla. SearchForm bileşeni yaz; useState'i içe aktar. const [q, setQ] = useState(""); tanımla. handleSubmit (parametre e) e.preventDefault() çağırır. <form onSubmit={handleSubmit}> içinde <input value={q} onChange={e => setQ(e.target.value)} /> ve <button type="submit">Ara</button> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// SearchForm bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function SearchForm() {
const [q, setQ] = useState("");
function handleSubmit(e) { e.preventDefault(); }
return <form onSubmit={handleSubmit}><input value={q} onChange={e => setQ(e.target.value)} /><button type="submit">Ara</button></form>;
}
export default SearchForm;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
preventDefault stops the reload.- value state'e bağlıdır
- submit'te preventDefault gerekmez Doğru cevap
- nesne state spread ile güncellenir
- onChange her tuşta çalışır
Açıklama: preventDefault her zaman gerekir; yoksa sayfa yenilenir.
2 Özet - Formlar: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
value |
State kaynağı |
onChange |
Değişim |
onSubmit |
Gönderim |
preventDefault |
Yenilemeyi engelle |