ChatGPT解决这个技术问题 Extra ChatGPT

React ignores 'for' attribute of the label element

In React (Facebook's framework), I need to render a label element bound to a text input using the standard for attribute.

e.g. the following JSX is used:

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

However, this produces HTML missing the required (and standard) for attribute:

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

What am I doing wrong?


S
Sophie Alpert

The for attribute is called htmlFor for consistency with the DOM property API. If you're using the development build of React, you should have seen a warning in your console about this.


Thanks Ben. Could you explain "for consistency with the DOM API" for me?
If you have a label element (as returned by document.createElement, document.getElementById, etc) you'd access its for property as label.htmlFor.
@Meglio In HTML you need a ID for the for attribute to work. To make your component reusable you could add a name property to your component that you set as ID and as name attribute on the actual input field.
Nevermind, I found the answer here. They say to use an ID generator.
@BenAlpert Thanks for shedding light on that. I never used to look at the DOM API becuase of jQuery and stuff (please forgive me). But in case anyone else is interested in learning more about that, check out developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement.
B
Brad Turek

Yes, for react,

for becomes htmlFor

class becomes className

etc.

see full list of how HTML attributes are changed here:

https://facebook.github.io/react/docs/dom-elements.html


J
Jani Devang

For React you must use it's per-define keywords to define html attributes.

class -> className

is used and

for -> htmlFor

is used, as react is case sensitive make sure you must follow small and capital as required.


T
Trident D'Gao

both for and class are reserved words in JavaScript this is why when it comes to HTML attributes in JSX you need to use something else, React team decided to use htmlFor and className respectively


That has absolutely nothing to do with that. The JSX transformation could just translate it to 'class' which is also valid for property names. In fact, in Preact, you can use both class and className.
While React could transform it in JSX, it doesn't. Their docs (as of 25-Mar-2020) state "Since for is a reserved word in JavaScript, React elements use htmlFor instead.": reactjs.org/docs/dom-elements.html#htmlfor
@MalteR you can tell it to IE8, IE7 and IE6
x
xgqfrms

just using react htmlFor to replace for!

Since for is a reserved word in JavaScript, React elements use htmlFor instead.

refs

you can find more info by following the below links.

https://facebook.github.io/react/docs/dom-elements.html#htmlfor

https://github.com/facebook/react/issues/8483

https://github.com/facebook/react/issues/1819


D
Daniel Nguyen

That is htmlFor in JSX and class is className in JSX