Reactはラベル要素の「for」属性を無視します

250

React（Facebookのフレームワーク）では、標準for属性を使用してテキスト入力にバインドされたラベル要素をレンダリングする必要があります。

たとえば、次のJSXが使用されます。

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

ただし、これにより、必須（および標準）for属性のないHTMLが生成されます。

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

何が悪いのですか？

reactjs  label 
— goofballLogic
ソース

回答:

484

このfor属性はhtmlFor、DOMプロパティAPIとの整合性のために呼び出されます。Reactの開発ビルドを使用している場合は、これについてコンソールに警告が表示されているはずです。

— ソフィーアルパート
ソース
4
ベンに感謝します。「DOM APIとの整合性のために」について説明してもらえますか？
— goofballLogic 2014
17
あなたが持っている場合はlabel要素を（などによって返されたdocument.createElement、document.getElementByIdあなたはそのアクセスしたい、など）forとプロパティをlabel.htmlFor。
— ソフィーアルパート2014
3
@Meglio HTMLでは、for属性が機能するためのIDが必要です。コンポーネントを再利用可能にするには、実際の入力フィールドにIDおよび名前属性として設定した名前プロパティをコンポーネントに追加します。
— Wim Mostmans、2015
2
気にしないで、私はここで答えを見つけました。彼らはIDジェネレーターを使うと言っています。
— トビア2015年
2
@BenAlpertその上に光を当ててくれてありがとう。私は、jQueryやその他のもののためにDOM APIを見たことはありません（ご容赦ください）。しかし、他の誰かがそれについてもっと学びたいと思っている場合は、developer.mozilla.org/ en-US/docs/Web/API/HTMLLabelElementをチェックしてください。
— alvincrespo 2016年
13

Reactの場合は、HTML属性を定義するために定義ごとのキーワードを使用する必要があります。

class -> className

使用され、

for -> htmlFor

反応が大文字と小文字を区別するので、使用されます。必要に応じて、小規模および資本に従う必要があります。

— ジャニデバン
ソース
3

両方forとclassJavaScriptの予約語です。これが、JSXのHTML属性に関して、別の何かを使用する必要がある理由です。ReactチームはhtmlFor、classNameそれぞれ使用することにしました。

— トライデントダオ
ソース
1
それはそれとは全く関係ありません。JSX変換は、それをプロパティ名に対しても有効な「クラス」に変換するだけです。実際、Preactでは、classとclassNameの両方を使用できます。
— Malte R
3
ReactはJSXでそれを変換できますが、そうではありません。彼らのドキュメント（2020年3月25日現在）にforは、「JavaScriptの予約語なので、htmlFor代わりにReact要素が使用されます。」：reactjs.org/docs/dom-elements.html#htmlfor
— nirvdrum
@MalteRはIE8、IE7、IE6にそれを伝えることができます
— Trident D'Gao
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.