Form gönderimi
- React kursu
- Başlangıç
- Ders 50/84
- 4 dk
Form gönderimini yakalayıp veriyi okumayı öğrenirsin.
Form gönderimi
Kontrollü inputları bir form içine alıp onSubmit ile tek seferde işleyebilirsin. Handler, e.preventDefault() ile yenilemeyi durdurur, sonra state'i okur.
Her input ayrı bir state parçasıdır; gönderimde hepsini bir araya getirip işlersin. Bu, çok alanlı formların temelidir.
Submit düğmesi type="submit" olunca formun onSubmit'ini tetikler; Enter da çalışır.
Çok alanlı form
Birden çok alanı ya ayrı useState'lerle ya da tek bir nesne state'le tutarsın. Nesne yaklaşımında spread ile güncellersin.
Örnek: setForm(f => ({...f, name: e.target.value})). Bu, her input için ayrı bir handler yazmaktan kurtarır; tek bir handleChange yeter.
İleride React Hook Form ile bu yükü azaltacağız; şimdilik temel yaklaşımı öğreniyoruz.
Uygulama Gönderimli form
Aşağıdaki iskeleti tamamla. GreetForm bileşeni yaz; useState'i içe aktar. const [name, setName] = useState(""); tanımla. handleSubmit (parametre e) ilk satırda e.preventDefault() çağırır. <form onSubmit={handleSubmit}> içinde <input value={name} onChange={e => setName(e.target.value)} /> ve <button type="submit">Gönder</button> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// GreetForm bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function GreetForm() {
const [name, setName] = useState("");
function handleSubmit(e) { e.preventDefault(); }
return <form onSubmit={handleSubmit}><input value={name} onChange={e => setName(e.target.value)} /><button type="submit">Gönder</button></form>;
}
export default GreetForm;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Form gönderiminde ilk iş ne olmalıdır?
preventDefault stops the browser reload.- state güncelleme
- fetch çağrısı
- render etme
- e.preventDefault() Doğru cevap
Açıklama: Önce sayfa yenilenmesi engellenir.
2 Form gönderimi: eksik parçayı tamamla
function handleSubmit(e) { ____; send(text); }function handleSubmit(e) { e.preventDefault(); send(text); }Açıklama: Önce öntanımlı davranışı engelledin.
3 Form gönderimi: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
onSubmit |
Form gönderim |
e.preventDefault() |
Yenilemeyi engeller |
type="submit" |
Gönderen düğme |
setForm({...f}) |
Nesne güncelleme |