Özet - Olaylar

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.

Örnek çözümü göster

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;

Kendini test et

Aşağıdakilerden hangisi yanlış?
```
You pass the function itself to the handler.
```
- onClick={handleClick}
- onClick={handleClick()} doğru yazımdır
- onSubmit form gönderimi yakalar
- e.target.value güncel metni verir
Cevabı göster

onClick={handleClick()} doğru yazımdır — onClick={handleClick()} yanlış; parantez fonksiyonu hemen çağırır.
Özet - Olaylar: kavramları eşleştir

onClick

Tıklama
onChange

Değişim
e.target.value

Güncel metin
e.preventDefault()

Yenilemeyi engelle

Sıradaki ders: State nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler