React игнорирует атрибут «for» элемента label

252

В React (платформа Facebook) мне нужно визуализировать элемент метки, привязанный к вводу текста, используя стандартный forатрибут.

например, используется следующий JSX:

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

Однако это приводит к тому, что в HTML отсутствует обязательный (и стандартный) forатрибут:

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

Что я делаю не так?

reactjs label goofballLogic
источник

Ответы:

486

forАтрибут называется htmlForсогласованность с DOM свойств API. Если вы используете сборку React для разработки, вы должны были увидеть предупреждение в консоли об этом.

Софи Альперт
источник
4
Спасибо Бен. Не могли бы вы объяснить «для согласованности с DOM API» для меня?
goofballLogic
18
Если у вас есть labelэлемент (как возвращено document.createElement, document.getElementByIdи т. Д.), Вы получите доступ к его forсвойству как label.htmlFor.
Софи Альперт,
3
@Meglio В HTML вам нужен идентификатор для работы атрибута for. Чтобы сделать ваш компонент многократно используемым, вы можете добавить свойство name к вашему компоненту, которое вы указали как ID и как атрибут name в фактическом поле ввода.
Вим Мостманс
2
Неважно, я нашел ответ здесь . Они говорят, чтобы использовать генератор идентификаторов.
Тобия
2
@BenAlpert Спасибо, что пролил свет на это. Я никогда не смотрел на DOM API из-за jQuery и прочего (пожалуйста, прости меня). Но в случае, если кто-то еще хочет узнать больше об этом, посетите developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
alvincrespo
13

Для React вы должны использовать его ключевые слова для определения атрибутов HTML.

class -> className

используется и

for -> htmlFor

используется, так как реагирует с учетом регистра, убедитесь, что вы должны следовать маленьким и прописным.

Яни Деванг
источник
4

оба forи classзарезервированные слова в JavaScript, поэтому, когда дело доходит до атрибутов HTML в JSX, вам нужно использовать что-то другое, команда React решила использовать htmlForи classNameсоответственно

Трезубец д'Гао
источник
1
Это не имеет ничего общего с этим. Преобразование JSX может просто перевести его в «класс», который также действителен для имен свойств. Фактически, в Preact вы можете использовать и class, и className.
Malte R
4
Хотя React может преобразовать его в JSX, это не так. Их документы (по состоянию на 25 марта 2020 г.) гласят : «Так forкак в JavaScript зарезервированное слово, htmlForвместо него используются элементы React »: reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@MalteR вы можете сказать это IE8, IE7 и IE6
Trident D'Gao
0

Это htmlFor в JSX и className в JSX

Даниэль Нгуен
источник