React JS Label for Kullanımı

React JS Label for Özelliğini Neden Kabul Etmiyor?

Html formları hazırlarken form elemanları hakkında bilgi verirken label etiketini kullanıyoruz. label etiketi, hangi eleman için kullanılacağının belirtilmesi için for özelliğini alır.

Mesela bir input özelliğimiz olsun ve adı emailAdresi şeklide isimlendirilsin. Bunun için label etiketi şu şekide yazılacaktır.

...
<label for="emailAdresi">Email Adresi: </label>
<input type="email" name="emailAdresi" />
...

Aynı işlemi React JS ile uygulama geliştirirken de yapmak isteyebiliriz. Fakat bu işlemi yaptığımızda bir hata mesaja alıyoruz.

Bunun nedeni for ifadesinin aslında bir Javascript ifadesi olması. Bu nedenle bu tip ifadelerde ReactJS farklı bir isimlendirme kullanmaktadır. Mesela for için htmlFor ifadesini kullanabiliriz.

...
<label htmlFor="emailAdresi">Email Adresi: </label>
<input type="email" name="emailAdresi" />
...

Yine aynı durum class ifadesinin kullanımında da geçerlidir. Çünkü class hem Html içerisinde bir tagın sitil sınıfını belirtmek için kullanılır ve hemde Javascript sınıf tanımlamasında kullanılır. Ve bu nedenle de ReactJS bir tagın sitil sınıfı belirtilirken class yerine className ifadesi kullanılır.

Sonuç

Aynı ifadeler farklı teknolojiler içerisinde kullanıldığından bu teknolojileri birlikte kullanan araçlar bazı düzenleme getirmek zorunda kalıyor. JSX formatı hem Html ve hemde Javascript kullandığı için çakışan ifadelerde farklı isimlendirmeler kullanılıyor. Mesela for için htmlFor kullanılması gibi.

Soru ve yorumlarınızı bekliyoruz.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir