Reaksiyon, etiket öğesinin 'için' özelliğini yok sayar


250

React (Facebook çerçeve), standart forözniteliği kullanarak bir metin girişine bağlı bir etiket öğesi oluşturmak gerekir .

örneğin, aşağıdaki JSX kullanılır:

<label for="test">Test</label>
<input type="text" id="test" />

Ancak bu, gerekli (ve standart) forözellik eksik HTML üretir :

<label>Test</label>
<input type="text" id="test">

Neyi yanlış yapıyorum?

Yanıtlar:


484

Bu forözellik, htmlForDOM özellik API'siyle tutarlılık için çağrılır . React geliştirme yapısını kullanıyorsanız, konsolunuzda bu konuda bir uyarı görmelisiniz.


4
Teşekkürler Ben. Benim için "DOM API ile tutarlılık için" açıklayabilir misiniz?
goofballLogic

17
Eğer bir varsa labelelemanı (aynı tarafından döndürülen document.createElement, document.getElementByIdonun erişmek istiyorum, vs) forolarak mülk label.htmlFor.
Sophie Alpert

3
@Meglio HTML'de, özelliğin çalışması için bir kimliğe ihtiyacınız vardır. Bileşeninizi yeniden kullanılabilir yapmak için, bileşeninize, gerçek giriş alanında ID ve ad özelliği olarak ayarladığınız bir name özelliği ekleyebilirsiniz.
Wim Mostmans

2
Boşver, cevabı burada buldum . Kimlik üreteci kullandıklarını söylüyorlar.
Tobia

2
@BenAlpert Buna ışık tuttuğunuz için teşekkürler. Ben hiç jQuery ve şeyler nedeniyle DOM API bakmak için kullanılan (lütfen beni affet). Ancak bunun hakkında daha fazla bilgi edinmek isteyen biri varsa developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement adresine bakın .
alvincrespo


13

React için, html özelliklerini tanımlamak üzere per-define anahtar sözcüklerini kullanmanız gerekir.

class -> className

kullanılır ve

for -> htmlFor

tepki büyük / küçük harfe duyarlı olduğundan küçük ve sermayeyi gerektiği gibi izlemeniz gerekir.


3

Her iki forve classHTML JSX niteliklerini geldiğinde, başka kullanım şeye gerek ekip kullanmaya karar Tepki neden JavaScript kelimeleri saklıdır şudur htmlForve classNamesırasıyla


1
Bunun kesinlikle bir ilgisi yok. JSX dönüşümü, onu özellik adları için de geçerli olan 'sınıfa' çevirebilir. Aslında, Preact'ta hem class hem de className öğelerini kullanabilirsiniz.
Malte R

3
React bunu JSX'te dönüştürebilse de, öyle değil. Onların docs devlet (25-Mar-2020 itibariyle) "yana forJavaScript ayrılmış bir sözcük elemanları kullanmak Tepki vardır htmlForyerine.": Reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum

@MalteR bunu IE8, IE7 ve IE6'ya söyleyebilirsin
Trident D'Gao


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.