React ignora el atributo 'for' del elemento de etiqueta

250

En React (marco de Facebook), necesito representar un elemento de etiqueta vinculado a una entrada de texto usando el foratributo estándar .

por ejemplo, se utiliza el siguiente JSX:

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

Sin embargo, esto produce HTML que falta el foratributo requerido (y estándar) :

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

¿Qué estoy haciendo mal?

reactjs label goofballLogic
fuente

Respuestas:

484

Se forllama htmlForal atributo por coherencia con la API de propiedades DOM. Si está utilizando la versión de desarrollo de React, debería haber visto una advertencia en su consola al respecto.

Sophie Alpert
fuente
44
Gracias Ben ¿Podría explicarme "por coherencia con la API DOM" para mí?
goofballLogic 01 de
17
Si usted tiene un labelelemento (tal como lo devuelve document.createElement, document.getElementById, etc.) es posible acceder a su forpropiedad como label.htmlFor.
Sophie Alpert
3
@Meglio En HTML necesita una ID para que funcione el atributo for. Para que su componente sea reutilizable, puede agregar una propiedad de nombre a su componente que establezca como ID y como atributo de nombre en el campo de entrada real.
Wim Mostmans
2
No importa, encontré la respuesta aquí . Dicen que use un generador de ID.
Tobia
2
@BenAlpert Gracias por arrojar luz sobre eso. Nunca solía mirar el DOM API debido a jQuery y otras cosas (por favor, perdóname). Pero en caso de que alguien más esté interesado en obtener más información al respecto, consulte developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
alvincrespo
13

Para React debe usar sus palabras clave por definición para definir atributos html.

class -> className

se usa y

for -> htmlFor

se utiliza, ya que reaccionar distingue entre mayúsculas y minúsculas, asegúrese de que debe seguir las letras pequeñas y mayúsculas según sea necesario.

Jani Devang
fuente
3

ambos fory classson palabras reservadas en JavaScript, esta es la razón por la cual cuando se trata de atributos HTML en JSX necesita usar otra cosa, el equipo de React decidió usar htmlFory classNamerespectivamente

Trident D'Gao
fuente
1
Eso no tiene absolutamente nada que ver con eso. La transformación JSX podría traducirla a 'clase', que también es válida para nombres de propiedades. De hecho, en Preact, puede usar class y className.
Malte R
3
Si bien React podría transformarlo en JSX, no lo hace. Sus documentos (a partir del 25 de marzo de 2020) establecen "Dado que fores una palabra reservada en JavaScript, los elementos React usan htmlForen su lugar": reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@MalteR puede decírselo a IE8, IE7 e IE6
Trident D'Gao
0

Eso es htmlFor en JSX y class es className en JSX

Daniel Nguyen
fuente