Form olayları
- React kursu
- Başlangıç
- Ders 38/84
- 4 dk
Input ve form gönderim olaylarını yakalamayı öğrenirsin.
Form olayları
Bir form gönderildiğinde tarayıcı sayfayı yeniler. React'te bunu engelleriz: handler içinde e.preventDefault() çağırırız.
Form etiketine onSubmit={handleSubmit} yazarsın. Handler, e alır ve önce e.preventDefault() yapar; sonra istediğini yapar.
Böylece form, sayfa yenilenmeden veriyi işleyebilir. Bu, modern React formlarının temelidir. Enter tuşu da aynı handler'ı çağırır; böylece klavye ile gönderim çalışır.
Submit düğmesi
Form içinde <button type="submit">Gönder</button> yazarsan, düğme formu gönderir. type="submit" öntanımlıdır ama yine de yazmak iyidir.
Düğmeye ayrıca onClick koymak yerine formun onSubmit'ini dinlemek daha temizdir; Enter tuşu da formu gönderir.
Bu yapı, klavye ve fare ile çalışan erişilebilir formlar kurar.
Uygulama Form iskeleti
Aşağıdaki iskeleti tamamla. SignupForm bileşeni yaz; içinde handleSubmit adında, parametresi e olan bir fonksiyon tanımla; ilk satırda e.preventDefault() çağırsın. <form onSubmit={handleSubmit}> içinde bir <input /> ve <button type="submit">Gönder</button> döndürsün. Dışa aktar.
Başlangıç kodu
// SignupForm bileşenini buraya tanımlaÖrnek çözüm
function SignupForm() {
function handleSubmit(e) { e.preventDefault(); }
return <form onSubmit={handleSubmit}><input /><button type="submit">Gönder</button></form>;
}
export default SignupForm;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Form gönderiminde sayfa yenilenmesini ne engeller?
preventDefault cancels the browser default behavior.- e.preventDefault() Doğru cevap
- e.stopPropagation()
- return false
- form reload
Açıklama: e.preventDefault() öntanımlı yenilemeyi durdurur.
2 Form olayları: eksik parçayı tamamla
function handleSubmit(e) { ____; /* işle */ }function handleSubmit(e) { e.preventDefault(); /* işle */ }Açıklama: Önce öntanımlı davranışı engelledin.
3 Form olayları: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
onSubmit |
Form gönderim |
e.preventDefault() |
Yenilemeyi engeller |
type="submit" |
Gönderen düğme |
input |
Veri alanı |