Özet - Olaylar
- React kursu
- Başlangıç
- Ders 39/84
- 5 dk
Bir butona tıklanınca sayaç artıran basit bir panel yazarsın.
Özet - Olaylar
Bu grupta React olaylarını öğrendin. onClick tıklamayı, onChange değişimi, onSubmit form gönderimini yakalar. Her birine handler fonksiyonu verirsin.
Handler'a olay nesnesi (e) geçirilir. En sık e.target.value (güncel metin) ve e.preventDefault() (öntanımlı davranışı engelle) kullanılır.
Handler'a fonksiyonun kendisini verirsin, çağrıyı değil. Form gönderiminde önce preventDefault yaparsın.
Uygulama Olay özet görevi
Aşağıdaki iskeleti tamamla. EventDemo bileşeni yaz; içinde handleClick (parametresiz, gövdesi boş) ve handleSubmit (parametresi e, ilk satırda e.preventDefault()) tanımla. <form onSubmit={handleSubmit}> içinde <button type="submit" onClick={handleClick}>Gönder</button> döndürsün. Dışa aktar.
Başlangıç kodu
// EventDemo bileşenini buraya tanımlaÖrnek çözüm
function EventDemo() {
function handleClick() {}
function handleSubmit(e) { e.preventDefault(); }
return <form onSubmit={handleSubmit}><button type="submit" onClick={handleClick}>Gönder</button></form>;
}
export default EventDemo;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
You pass the function itself to the handler.- onClick={handleClick}
- onClick={handleClick()} doğru yazımdır Doğru cevap
- onSubmit form gönderimi yakalar
- e.target.value güncel metni verir
Açıklama: onClick={handleClick()} yanlış; parantez fonksiyonu hemen çağırır.
2 Özet - Olaylar: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
onClick |
Tıklama |
onChange |
Değişim |
e.target.value |
Güncel metin |
e.preventDefault() |
Yenilemeyi engelle |