Form olayları

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.

Örnek çözümü göster

function SignupForm() {
  function handleSubmit(e) { e.preventDefault(); }
  return <form onSubmit={handleSubmit}><input /><button type="submit">Gönder</button></form>;
}

export default SignupForm;

Kendini test et

Form gönderiminde sayfa yenilenmesini ne engeller?
```
preventDefault cancels the browser default behavior.
```
- e.preventDefault()
- e.stopPropagation()
- return false
- form reload
Cevabı göster

e.preventDefault() — e.preventDefault() öntanımlı yenilemeyi durdurur.

Form olayları: eksik parçayı tamamla

function handleSubmit(e) { ____; /* işle */ }

Cevabı göster

function handleSubmit(e) { e.preventDefault(); /* işle */ }

Form olayları: kavramları eşleştir

onSubmit

Form gönderim
e.preventDefault()

Yenilemeyi engeller
type="submit"

Gönderen düğme
input

Veri alanı

Sıradaki ders: Özet - Olaylar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler