Olayları İşleme ( Handling Event in React) ve Bağlama ( Binding )

Handling Events

React olayları isimlendirilirken camelCase duyarlılığı varıdır onClick gibi.

Hem SetState hemde event leri kapsayan bir örnek yapalım.

Bir butonumuz olsun. Butona basınca Aç Kapa işlemi yapsın.. 

Sayacımız olsun bu sayaçta butona kaç kere bastığımızın bilgisini tutsun ve ekrana getirsin. 

• class componentı oluşturalım. 
• constructor içerisinde this.state i tanımlayalım. 
• state için 2 alan; biri basılıp basılmadığı bilgisini tutsun, diğeri sayacımız
• return() kısmında bir button oluşturalım ve onClick eventine bir handler gönderelim. 
• Bu handler setState ile state durumunu true false olarak değiştirsin ve sayacımızı arttırsın
• Sayacı ekrana yazdıralım

Binding ( Bağlamak )

JavaScriptte, class yöntemleri varsayılan olarak bağlı değildir. Bu yüzden eğer bir methodu çağırırken () kullanmadan çağırıyorsak (örnekte olduğu gibi onClick={this.handleClick} ) , bu methodu bağlamamız gerekir. Bunun icinde constructorın içerisinde methodu bind ile bağlarız. Öbür türlü methodumuz tanımsız olur. 

Eğer bu binding işlemini birden farklı şekilde yapabiliriz.

• Constructor içerisinde bağlamak (Yukarıda olduğu gibi)
• Render() methodunda çağırırken bind bağlayarak çağırmak. 

• Sınıf alanlarını kullanmak .

• Çağırırken Arrow functionları kullanmak