Olaylar (events)
- React kursu
- Başlangıç
- Ders 36/84
- 4 dk
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.
Başlangıç kodu
// ClickButton bileşenini buraya tanımlaÖrnek çözüm
function ClickButton() {
function handleClick() {}
return <button onClick={handleClick}>BAS</button>;
}
export default ClickButton;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakinden hangisi doğrudur?
If you add parens, the function runs at once.- onClick="handleClick"
- onClick={handleClick()}
- onClick={handleClick} Doğru cevap
- onClick=handleClick
Açıklama: Fonksiyonu kendisini verirsin, çağrıyı değil.
2 Olaylar (events): eksik parçayı tamamla
<button onClick={____}>BAS</button><button onClick={handleClick}>BAS</button>Açıklama: Fonksiyonu kendisini verdin.
3 Olaylar (events): kavramları eşleştir
| Kavram | Anlamı |
|---|---|
onClick |
Tıklama |
onChange |
Değişim |
onSubmit |
Form gönderim |
onMouseOver |
Üzerine gelme |