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

Question

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

98

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

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

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

Однако это приводит к тому, что HTML не содержит требуемого (и стандартного) атрибута for:

<label data-reactid=".1.0.0">Test</label>
<input type="text" id="test" data-reactid=".1.0.1">

Что я делаю неправильно?

goofballLogic 31 март 2014, в 02:15

Источник

Теги:

reactjs

label

react-jsx

4 ответа

8

Да, для реакции,

for становится htmlFor class становится классомName и т.д.

см. полный список изменений атрибутов HTML:

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

Derric 03 фев. 2017, в 23:57

1

просто используя команду `htmlFor` для замены `for`!

вы можете найти дополнительную информацию, следуя приведенным ниже ссылкам.

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

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

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

xgqfrms 23 июль 2017, в 13:09

1

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

class → className

и

for → htmlFor

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

Jani Devang 13 июнь 2017, в 08:43

Ещё вопросы

Sophie Alpert · Accepted Answer · 2014-03-31T03-28-00.000Z

187

Лучший ответ

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

Sophie Alpert 31 март 2014, в 03:28

0

Спасибо Бен. Не могли бы вы объяснить «для согласованности с DOM API» для меня?
goofballLogic 01 апр. 2014, в 17:01
13

Если у вас есть элемент label (как возвращено document.createElement , document.getElementById и т. Д.), Вы получите доступ к его свойству for как label.htmlFor .
Sophie Alpert 01 апр. 2014, в 17:17
1

Ах, имеет смысл.
goofballLogic 03 апр. 2014, в 00:53
0

В React, есть ли способ связать метку с входом без идентификатора? Если я использую идентификатор и повторно использую компонент, он заканчивается для страницы, имеющей несколько входов с одинаковым идентификатором.
Meglio 23 фев. 2015, в 12:21
3

@Meglio В HTML вам нужен идентификатор для работы атрибута for. Чтобы сделать ваш компонент многократно используемым, вы можете добавить свойство name к вашему компоненту, которое вы указали как ID и как атрибут name в фактическом поле ввода.
Wim Mostmans 23 фев. 2015, в 12:53
0

@WimMostmans, что если у меня нет уникального свойства name? Какой безопасный способ генерировать уникальные идентификаторы? Может быть, переменная класса, которая увеличивается каждый раз, когда она используется? Разве я не могу просто спросить React для идентификатора текущего компонента? Это, безусловно, есть.
Tobia 02 май 2015, в 22:00
2

Неважно, я нашел ответ здесь . Они говорят, чтобы использовать генератор идентификаторов.
Tobia 02 май 2015, в 22:16
2

@BenAlpert Спасибо, что пролил свет на это. Я никогда не смотрел на DOM API из-за jQuery и прочего (пожалуйста, прости меня). Но если кому-то еще интересно узнать об этом больше, посетите developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
alvincrespo 03 июнь 2016, в 21:01
0

@ben в отличие от того, что было указано, если htmlFor является атрибутом реагирования, а не for это может быть связано не с вопросами согласованности, а с тем, что for является зарезервированным словом в Javascript (а React использует Javascript для визуализации). По крайней мере, это причина, указанная в [ facebook.github.io/react/docs/… документации)
Ilan Schemoul 30 июнь 2017, в 22:59

Показать ещё 7 комментариев

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

4 ответа

просто используя команду htmlFor для замены for!

Ещё вопросы

просто используя команду `htmlFor` для замены `for`!