React Event Kavramı ve Event Oluşturma,Eventler ve State Değiştirme

Merhabalar , bu yazımda React eventleri , context bind etme ve eventler ile state değiştirme işlemi ile ilgili toplamış olduğum bilgileri sizlerle paylaşacağım.
- React Eventleri aslında oldukça kolay, context bind etme işleminde ise Javascript tarafında eksiğiniz olmadığı takdirde herhangi bir zorluk yaşamayacaksınız.
- Javascript’te herhangi bir event oluşturulurken ve bu event sonrasında çalışacak fonksiyon oluşturulurken direk olarak elemente event eklenir. React’te de aynı işlem gerçekleştiriliyor.

Amacımız yukarıdaki “isim” alanına basıldığında fonksiyonun çalışmasını sağlayabilmek. O nedenle bu elementin kodda bulunduğu yere onClick eventi ve bu eventten sonra çalışacak bir this.onClickEvent fonksiyonu eklemesi gerçekleştirmemiz gerekir.

onClickEvent metodu ilgili classın içerisine tanımlanır. this.onClickEvent kısmında bir event çalıştırıldığı için ; Javascript otomatik olarak bir tane event objesini gönderir.
O nedenle onClickEvent fonksiyonu içerisinde, parametre olarak bu event’i “e” şeklinde yakalayabiliriz. 🙂

Yukarıda yapmak istediğimiz; “e” olarak yakaladığımız eventin ilk olarak nereden geldiğini tespit edebilmek ve bunun için de “e.target”’ı kullandık. Bu bize bu eventin nerede oluştuğu bilgisini verirken; diğer kısımda ise “isim”’e tıklandığında konsola “test” ibaresinin yazılmasını sağlayacaktır.
Bu işlemler yapıldığında konsolda ilgili alan aşağıdaki gibi olacaktır.

Context Bind etme işlemi
- Context bind etme işlemi için öncelikle tanımlamış olduğumuz fonksiyonda konsola “this”yazdırmaya çalışarak “this” alanının neyi gösterdiğini tespit edeceğiz.
- Bu alanda beklentimiz; bu bir metot olduğu için ve ilgili classın objesini göstereceğini düşünmek olabilir. Ancak Javascript ve React tarafında durum bu şekilde değildir.


- “Undefined” şeklinde sonuç alındı. Bunun sebebi; classın içerisinde React’in bize sağladığı bir render metodumuz mevcuttu. Ancak yazdığımız onClickEvent metodu Render’dan bağımsız olarak yazdığımız bir metottur.
- Render fonksiyonu komponentten miras aldığımızda gelen bir metot olduğu için bu fonksiyon içerisindeki “this” objeyi sıkıntısız olarak gösterir. Ancak kendi yazdığımız onClickEvent veya yazacağımız diğer metotlarda bu “this”’in nereyi gösterdiği belli değildir. O nedenle bunu bağlamak ve bind etmek gerekir.
- Bunu sağlayabilmek için bind fonksiyonundan yararlanılır. Bu alanda bind işlemi gerçekleştirildiğinde bind fonksiyonun içerisindeki “this” aslında classtaki objeyi gösteriyor olacaktır. Ve onClickEvent’inin içerisinde kullandığımız “this” classtaki objemizi gösterecektir.


- Bind etme işlemi constructor içerisinde de gerçekleştirilebilir.

- Bind etme işlemi için bir diğer seçenek de Arrow Function’dur. Arrow Function otomatik olarak bind işlemini gerçekleştirir. Metodu Arrow Function olarak yazarsanız; ekstradan bir bind işlemine gerek kalmayacaktır.
Peki fonksiyona nasıl değer gönderebilirim ?
- Değer göndermek için bind fonksiyonu kullanılır.
- Bind ‘ın ilk parametresinin this olması gerekir. Diğer değerler ise virgül ile ayrılarak verilir.

- Tanımlamış olduğumuz Arrow Function’da ise kendi gönderdiğimiz değerler önce yazılır daha sonra ise event parametresi yerleştirilir.


Eventler ve State Değiştirme
Not: State kavramı ile ilgili yazıma buradan ulaşabilirsiniz.
- Stateler direk olarak değiştirilememektedir. Yani eğer “isim” alanına tıkladığımızda var olan statenin durumunu değiştirmek istiyorsak aşağıdaki gibi bir kullanımda bize uyarı verecektir.


- Stateler değiştirilmek istendiğinde setState() metodu kullanılmalıdır. setState() fonksiyonu yardımıyla eğer isVisible false ise true, true ise false olacak şekilde aşağıdaki gibi işlem yapılır.



Bir sonraki yazıda görüşmek üzere, umarım faydalı olmuştur… 🙂
Kaynakça
- Mustafa Murat Coşkun- Sıfırdan React.js ve Context Api /Udemy