Merhaba arkadaşlar! Bugün sizlerle React Events (Olaylar) Nedir? React Events Kullanımı nasıl olur onu anlatacağım. React, etkileşimli web uygulamaları geliştirmemizi sağlayan güçlü bir kütüphanedir ve olaylar bu etkileşimi mümkün kılan önemli bir parçadır.
Hadi başlayalım!
React Events (Olaylar) Nedir? React Events Kullanımı
1-Event’leri Anlama: React’te event’ler, kullanıcının bir web sayfasıyla etkileşime geçtiği zamanlarda oluşturulan olaylardır. Örneğin, bir component’a tıklanması ya da bir input alanına yazı girilmesi bir event’i tetikleyebilir.
Aşağıda bir HTML ortamında tanımlanan event’i inceleyelim.
|
1 2 3 4 5 |
<button onclick="showMessage()"> Merhaba Mehsatek </button> |
Şimdi de aynı event’in bir JSX ortamında yazımına bakalım.
|
1 2 3 4 5 |
<button onClick={showMessage}> Merhaba Mehsatek </button> |
Gördüğünüz gibi JSX ortamında eventler camelCase şeklinde yazılır. Ve fonksiyonlar iki tırnak arasında değil, süslü parantezler arasında kullanılır. HTML ortamında fonksiyon isminden sonra fonksiyonun işlev kazanması için parantez “()” aç kapa yapılırken, JSX’te sadece fonksiyon adı yazılır.
2-Event’leri Kullanma: Event’leri React component’larında kullanmak oldukça kolaydır. İlk olarak, kullanmak istediğimiz event’i React component’imize eklememiz gerekmektedir. Örneğin, bir butonun tıklanmasını dinlemek istiyorsak, onClick event’ini kullanabiliriz.
⇒ React’te 2 farklı şekilde event’ler yazabiliriz.
- onClick={add}
- onClick={() => add()}
Bu iki kullanım arasında pratik bir fark bulunmaz, ancak bazı durumlarda işlevin nasıl çalıştığını kontrol etmek isteyebilirsiniz.
Örneğin, onClick={() => add()} kullanarak ek işlemler yapmak ya da parametreler geçirmek isterseniz kullanışlı olabilir. Diyelim ki toplama işlemi yapan bir fonksiyon yazdınız ve sayıları önceden fonksiyona söylediniz.
Yani 5 ile 3’ü toplayan bir fonksiyon yazdınız. O zaman onClick={add} şeklinde tanımlamanız yeterlidir. Butona tıklandığında fonksiyon tetiklenir ve bu toplama işlemi yapılır.
Ama diyelim ki siz bu iki sayıyı kullanıcıdan alacaksınız. O inputa yazacak, sizde onun gönderdiği parametreleri yakalayıp toplama işlemi yapacaksınız.
O zaman onClick={() => add(value1, value2)} şeklinde yazarsınız ve böylece fonksiyon aldığı bu iki sayıyı toplar.
Bunu örnek üzerinde görelim. Örneğimizde toplanacak 2 sayıyı biz direk fonksiyon içinde parametre olarak gönderelim.
Örnek 1: Parametre Alan onClick Event’i: Şimdi toplanacak iki sayıyı parametre olarak alan bir fonksiyon yazalım ve onClick event’i verelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const App = () => { const add = (num1, num2) => { const sum = num1 + num2; console.log("Toplam:", sum); }; return <button onClick={() => add(5, 3)}>Topla</button>; }; export default App; |
Burada add fonksiyonu iki sayıyı toplayacak ama bu sayılar fonksiyon üzerinden parametre olarak gelecektir. Bu nedenle onClick olayı için onClick={() => add(5, 3)} şeklinde bir syntax tercih ettik.
Çıktı:
Örnek 2: Basit Bir onClick Event’i: Şimdi başka bir örnek yapalım. Basit bir “Merhaba” button’u oluşturacağız ve bu button’a tıklandığında bir mesaj göstereceğiz. İlk olarak, bir <button> elementi oluşturalım:
App.js
|
1 2 3 4 5 6 7 8 9 10 11 |
const App = () => { return ( <div> <button onClick={handleClick}>Merhaba</button> </div> ); }; export default App; |
Burada onClick event’ine handleClick fonksiyonunu atıyoruz. Şimdi, bu fonksiyonu tanımlayalım:
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const App = () => { const handleClick = () => { alert("Merhaba, React events dünyasına hoş geldiniz!"); } return ( <div> <button onClick={handleClick}>Merhaba</button> </div> ); }; export default App; |
Bu fonksiyon, button’a tıklandığında alert fonksiyonunu kullanarak bir mesaj gösterir.
Aşağıdaki çıktıyı inceleyelim.
Çıktı:
Örnek 3: Input Event’i: Şimdi de bir input alanına yazı girildiğinde bir event tetiklemeyi deneyelim. Yine bir input elementi oluşturmalıyız:
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const App = () => { return ( <div> <input type="text" onChange={handleChange} /> </div> ); }; export default App; |
Burada onChange event’ini kullanıyoruz. Şimdi, bu event’i dinleyen handleChange fonksiyonunu oluşturalım:
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const App = () => { const handleChange = (event) => { console.log('Text değişti:', event.target.value); } return ( <div> <input type="text" onChange={handleChange} /> </div> ); }; export default App; |
Bu fonksiyon, input alanına her yazı girildiğinde console’a yazıyı loglar.
Örneğimizin çıktısını aşağıda inceleyelim.
Çıktı:
Burada React’in her harf yazımını bir güncelleme olarak yakaladığını ve anında render ettiğini gözden kaçırmayalım.
Not: Event Parametreleri: Event’ler genellikle bir parametre alır. Örneğin, yukarıdaki handleChange fonksiyonu, event bilgisini parametre olarak alır. Bu sayede, event nesnesine erişebilir ve içindeki değerleri kullanabiliriz.
Event nesnesi ile ilgili daha fazla bilgiyi buradan alabilirsiniz.
Örnek 4: Event Nesnesini Parametre Olarak Alan Fonksiyon: Şimdi, bir button’a tıklandığında button’un ID’sini gösteren bir örnek yapalım. İlk olarak, button’lara benzersiz ID‘ler verelim:
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const App = () => { return ( <div> <button id="button_1" onClick={handleClick}> Buton 1 </button> <button id="button_2" onClick={handleClick}> Buton 2 </button> </div> ); }; export default App; |
Şimdi button’a tıklandığında tıklanan button’un ID’sini gösteren bir fonksiyon yazalım. Sonra da çıktımızı inceleyelim.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const App = () => { const handleClick = (event) => { const buttonId = event.target.id; alert(`Tıklanan button ID'si: ${buttonId}`); }; return ( <div> <button id="button_1" onClick={handleClick}> Buton 1 </button> <button id="button_2" onClick={handleClick}> Buton 2 </button> </div> ); }; export default App; |
Çıktı:
Burada event nesnesi sayesinde target olayını kullanarak tıkladığımız butona ulaştık ve o butonun ID’sini ekrana yazdırdık.
Aynı örnekte bir de butonların text’ine ulaşalım ve console’a yazdıralım.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const App = () => { const handleClick = (e) => { const buttonId = e.target.innerHTML; console.log(`Tıklanan button: ${buttonId}`); }; return ( <div> <button id="button_1" onClick={(e) => handleClick(e)}> Buton 1 </button> <button id="button_2" onClick={handleClick}> Buton 2 </button> </div> ); }; export default App; |
Çıktı:
Örnek 5: Event objesi ile beraber başka bir parametre de alan onClick eventi: Şimdi hem event’i hem de başka bir parametre alan bir onClick olayı görelim.
⇒ İlk olarak, bir React componenti oluşturalım ve içinde bir fonksiyon tanımlayalım. Bu fonksiyon, hem olay nesnesini hem de başka bir parametreyi alan bir fonksiyon olacak.
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const App = () => { const handleClick = (event, otherParam) => { alert(`${otherParam} kullanıcısı ID'si ${event.target.id} butona tıkladı`); }; return ( <button id="my_button" onClick={(event) => handleClick(event, "Bedir Gocmez")}> Beni Tıkla </button> ); }; export default App; |
⇒ handleClick fonksiyonu, iki parametre alır: event ve otherParam. Bu fonksiyon, olay nesnesi (event) ve diğer parametre (otherParam) değerini kullanarak işlemleri gerçekleştirir.
⇒ JSX kodunda, <button> bileşenine onClick olayını atıyoruz. İçerisinde anonim bir ok işlevi kullanıyoruz. Bu ok işlevi, handleClick fonksiyonunu çağırırken, olay nesnesini (event) ve diğer parametreyi (‘Bedir Gocmez’) aktarır.
Çıktı:
⇒ Bu şekilde, onClick olayı kullanarak hem olay nesnesini hem de başka bir parametreyi alan bir fonksiyonu tetikleyebilirsiniz. handleClick fonksiyonu, olay nesnesi ve diğer parametreyi kullanarak işlemlerini gerçekleştirebilir.
Umarım “React Events (Olaylar) Nedir? React Event Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Event kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.
Şu yazılar da ilginizi çekebilir.
Create React App ile Hazır React Projesi Oluşturma
 Nedir? React Events Kullanımı){kind=link}