Bu yazımda andığım kadarıyla bu yazımda React events (olaylar) konusundan bahsedeceğim.
En basit hali ile bir butona, tuşa basıldığında veya ekranda bir alana gelindiğinde bir olay tetikliyoruz. Bunları React’ta events ile yapıyoruz.
Javascript’te bildiğimiz eventler ile aynı mantık çalışıyor, sadece dikkat edilmesi gereken bazı hususlar mevcut. Eventler genellikle handle kelimesi ile başlar. Tabiki zorunlu değilsiniz, istediğiniz ismi verebilirsiniz ancak genel kullanımda handle görüldüğünde bir event olduğu anlaşılıyor.
export default function Events() {
function handlePreviousClick() {
alert("Geri butonu");
}
function handleNextClick() {
alert("İleri butonu");
}
return (
<>
<button onClick={handlePreviousClick}>Previous</button>
<button onClick={handleNextClick}>Next</button>
</>
);
}Yukarıdaki kod bloğunda Previous ve Next adında iki adet butonumuz var. Bunlardan birine tıklandığında handlePreviousClick fonksiyonu, diğerine tıklandığında handleNextClick fonksiyonu çağırılıyor.
Fonksiyonu çağırırken önüne () ifadelerini eklersek sayfa yüklenince fonksiyonlar çağrılır. Bunu istemediğimiz için <button onClick={handlePreviousClick}>Previous</button> şeklinde tanımlıyoruz.
Yukarıdaki kodda tek bir click işleminde bir fonksiyon çağırılacak ise aşağıdaki gibi bir kullanım daha mantıklı olacaktır.
export default function Events() {
return (
<>
<button
onClick={() => {
alert("Geri butonu");
}}
>
Previous
</button>
<button
onClick={() => {
alert("İleri butonu");
}}
>
Next
</button>
</>
);
}React’ta En Sık Kullanılan Events(Olaylar)
Bu event’ler React projelerinde kullanıcı etkileşimlerini yakalamak ve işlemleri gerçekleştirmek için sıkça kullanılır. Daha fazlasına ve kullanımlarına react.dev adresinden ulaşabilirsiniz.
- onChange – Form elementlerinde (input, textarea, select) değer değişikliğini yakalar.
- onSubmit – Form gönderildiğinde tetiklenir.
- onClick – Bir elemente tıklandığında tetiklenir.
- onDoubleClick – Bir elemente çift tıklandığında tetiklenir.
- onFocus – Bir input elementine odaklanıldığında tetiklenir.
- onBlur – Bir input elementinden odak kaybolduğunda tetiklenir.
- onKeyDown – Klavyede bir tuşa basıldığında tetiklenir.
- onKeyUp – Bir tuş serbest bırakıldığında tetiklenir.
- onLoad – Sayfa veya resim gibi içerikler yüklendiğinde tetiklenir.
- onResize – Pencere boyutu değiştiğinde tetiklenir.
- onMouseEnter – Fare bir elementin üzerine geldiğinde tetiklenir.
- onMouseLeave – Fare bir elementin üzerinden çıktığında tetiklenir.
- onMouseDown – Fare bir elemente tıklandığında (basılı tutulduğunda) tetiklenir.
- onMouseUp – Fare bir elementteki tıklama bırakıldığında tetiklenir.
- onMouseMove – Fare hareket ettiğinde tetiklenir.
- onTouchStart – Dokunmatik cihazlarda bir elemente dokunma başladığında tetiklenir.
- onTouchMove – Dokunmatik cihazlarda bir element üzerinde hareket edildiğinde tetiklenir.
- onTouchEnd – Dokunmatik cihazlarda bir elemente dokunma sona erdiğinde tetiklenir.
- onCopy – Bir içerik kopyalandığında tetiklenir.
- onPaste – Bir içerik yapıştırıldığında tetiklenir.
- onCut – Bir içerik kesildiğinde tetiklenir.
- onScroll – Bir element kaydırıldığında tetiklenir.
- onContextMenu – Sağ tıklama ile bağlam menüsü açıldığında tetiklenir.
- onDragStart – Bir element sürüklenmeye başlandığında tetiklenir.
- onDragOver – Bir element üzerinde sürüklenme devam ederken tetiklenir.
- onDrop – Bir element üzerine bırakıldığında tetiklenir.
Daha fazlasına buradan ulaşabilirsiniz.
Buraya kadar anlattığımız kısımda temel event kullanımını işledik. Normal Javascript’te bir event sonrasında güncellenen veriyi ekrana yansıtmak için tekrar bir render fonksiyonunu çağıyoruz ve tüm içerik tekrar yükleniyordu. React’te bulunan state kullanımı sayesinde buna gerek kalmıyor.
Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.