Olaylar (events)

onClick gibi olay özniteliklerine fonksiyon vermeyi öğrenirsin.

Olaylar (events)

React'te kullanıcı etkileşimini olay handler'ları yakalar. Bir düğmeye tıklamayı onClick prop'uyla dinlersin: <button onClick={handleClick}>BAS</button>.

Handler, küçük harfle başlayan bir fonksiyondur. Süslü parantez içinde fonksiyon kendisini verirsin; çağrıyı değil. Yani onClick={handleClick} doğru, onClick={handleClick()} yanlış.

Tıklama olunca React handler'ı çağırır; sen orada istediğini yaparsın.

Handler yazımı

Handler'ı bileşenin içinde tanımlarsın: function handleClick() { ... }. Dışarıdan parametre almazsa boş parantezle yazılır.

Bileşen her render'da handler'ı yeniden oluşturur; bu normaldır. İleride useCallback ile bunu optimize etmeyi göreceğiz.

Handler içinde istediğin işi yapabilirsin: veri hesapla, başka fonksiyon çağır, ileride state güncelle.

Uygulama Tıklanan düğme

Aşağıdaki iskeleti tamamla. ClickButton bileşeni yaz; içinde handleClick adında bir fonksiyon tanımla (gövdesi boş olabilir). <button onClick={handleClick}>BAS</button> döndürsün. Dışa aktar.

Örnek çözümü göster

function ClickButton() {
  function handleClick() {}
  return <button onClick={handleClick}>BAS</button>;
}

export default ClickButton;

Kendini test et

Aşağıdakinden hangisi doğrudur?
```
If you add parens, the function runs at once.
```
- onClick="handleClick"
- onClick={handleClick()}
- onClick={handleClick}
- onClick=handleClick
Cevabı göster

onClick={handleClick} — Fonksiyonu kendisini verirsin, çağrıyı değil.

Olaylar (events): eksik parçayı tamamla

<button onClick={____}>BAS</button>

Cevabı göster

<button onClick={handleClick}>BAS</button>

Olaylar (events): kavramları eşleştir

onClick

Tıklama
onChange

Değişim
onSubmit

Form gönderim
onMouseOver

Üzerine gelme

Sıradaki ders: Olay nesnesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler