React ignora o atributo 'for' do elemento label

250

No React (estrutura do Facebook), preciso renderizar um elemento de rótulo associado a uma entrada de texto usando o foratributo padrão .

por exemplo, o seguinte JSX é usado:

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

No entanto, isso produz HTML sem o foratributo necessário (e padrão) :

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

O que estou fazendo de errado?

reactjs label goofballLogic
fonte

Respostas:

484

O foratributo é chamado htmlForpara consistência com a API da propriedade DOM. Se você estiver usando a versão de desenvolvimento do React, deverá ter visto um aviso no console sobre isso.

Sophie Alpert
fonte
4
Obrigado Ben. Você poderia explicar "por consistência com a API DOM" para mim?
usar o seguinte código
17
Se você tem um labelelemento (como retornado por document.createElement, document.getElementById, etc) que você acessar a sua forpropriedade como label.htmlFor.
Sophie Alpert
3
@Meglio Em HTML, você precisa de um ID para o atributo for funcionar. Para tornar seu componente reutilizável, você pode adicionar uma propriedade de nome ao componente que você define como ID e como atributo de nome no campo de entrada real.
Wim Mostmans
2
Deixa pra lá, encontrei a resposta aqui . Eles dizem para usar um gerador de identificação.
Tobia
2
@ BenAlpert Obrigado por esclarecer isso. Eu nunca costumava olhar para a API DOM por causa do jQuery e outras coisas (por favor, me perdoe). Mas, se alguém mais estiver interessado em aprender mais sobre isso, consulte developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
Alvincrespo
13

Para React, você deve usar suas palavras-chave por definição para definir atributos html.

class -> className

é usado e

for -> htmlFor

é usado, pois react faz distinção entre maiúsculas e minúsculas, certifique-se de seguir pequeno e capital conforme necessário.

Jani Devang
fonte
3

ambas fore classsão palavras reservadas em JavaScript; é por isso que, quando se trata de atributos HTML em JSX, você precisa usar outra coisa, a equipe do React decidiu usar htmlFore, classNamerespectivamente,

Trident D'Gao
fonte
1
Isso não tem absolutamente nada a ver com isso. A transformação JSX poderia apenas traduzi-la para 'class', que também é válida para nomes de propriedades. De fato, em Preact, você pode usar class e className.
Malte R
3
Embora o React possa transformá-lo em JSX, isso não ocorre. Seus documentos (em 25 de março de 2020) afirmam "Como foré uma palavra reservada em JavaScript, os elementos React são usados ​​em htmlForvez disso.": Reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@ MalteR você pode contar para IE8, IE7 e IE6
Trident D'Gao
0

Isso é htmlFor em JSX e classe é className em JSX

Daniel Nguyen
fonte