React ignore l'attribut 'for' de l'élément label

250

Dans React (le cadre de Facebook), j'ai besoin de rendre un élément d'étiquette lié à une entrée de texte en utilisant l' forattribut standard .

Par exemple, le JSX suivant est utilisé:

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

Cependant, cela produit du HTML sans l' forattribut requis (et standard) :

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

Qu'est-ce que je fais mal?

reactjs label goofballLogic
la source

Réponses:

484

L' forattribut est appelé htmlForpar souci de cohérence avec l'API de propriété DOM. Si vous utilisez la version de développement de React, vous devriez avoir vu un avertissement dans votre console à ce sujet.

Sophie Alpert
la source
4
Merci Ben. Pourriez-vous m'expliquer "par souci de cohérence avec l'API DOM"?
goofballLogic
17
Si vous avez un labelélément (comme retourné par document.createElement, document.getElementById, etc.) que vous souhaitez accéder à sa forpropriété comme label.htmlFor.
Sophie Alpert
3
@Meglio En HTML, vous avez besoin d'un ID pour que l'attribut for fonctionne. Pour rendre votre composant réutilisable, vous pouvez ajouter une propriété de nom à votre composant que vous définissez comme ID et comme attribut de nom dans le champ de saisie réel.
Wim Mostmans
2
Peu importe, j'ai trouvé la réponse ici . Ils disent d'utiliser un générateur d'identification.
Tobia
2
@BenAlpert Merci d'avoir fait la lumière là-dessus. Je n'ai jamais regardé l'API DOM à cause de jQuery et d'autres trucs (veuillez me pardonner). Mais si quelqu'un d'autre souhaite en savoir plus à ce sujet, consultez developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
alvincrespo
13

Pour React, vous devez utiliser ses mots clés par définition pour définir les attributs html.

class -> className

est utilisé et

for -> htmlFor

est utilisé, comme react est sensible à la casse, assurez-vous que vous devez suivre petit et capital comme requis.

Jani Devang
la source
3

les deux foret classsont des mots réservés en JavaScript, c'est pourquoi en ce qui concerne les attributs HTML dans JSX, vous devez utiliser autre chose, l'équipe React a décidé d'utiliser htmlForet classNamerespectivement

Trident D'Gao
la source
1
Cela n'a absolument rien à voir avec cela. La transformation JSX pourrait simplement la traduire en «classe» qui est également valide pour les noms de propriété. En fait, dans Preact, vous pouvez utiliser à la fois class et className.
Malte R
3
Bien que React puisse le transformer en JSX, ce n'est pas le cas. Leurs documents (à partir du 25 mars 2020) indiquent "Puisque forc'est un mot réservé en JavaScript, les éléments React utilisent à la htmlForplace.": Reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@MalteR vous pouvez le dire à IE8, IE7 et IE6
Trident D'Gao
0

C'est htmlFor dans JSX et la classe est className dans JSX

Daniel Nguyen
la source