React는 레이블 요소의 'for'속성을 무시합니다.


250

React (Facebook의 프레임 워크)에서 표준 for속성을 사용하여 텍스트 입력에 바인딩 된 레이블 요소를 렌더링해야 합니다.

예를 들어 다음 JSX가 사용됩니다.

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

그러나 이렇게하면 HTML에 필수 (및 표준) for속성 이 누락됩니다 .

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

내가 뭘 잘못하고 있죠?

답변:


484

for속성이라고 htmlFor는 DOM 속성 API와 일관성을 위해. React의 개발 빌드를 사용하는 경우 콘솔에 이에 대한 경고가 표시되어야합니다.


4
고마워 벤. "DOM API와의 일관성을 위해"설명해 주시겠습니까?
goofballLogic

17
당신이있는 경우 label요소를 (같은 의해 반환 document.createElement, document.getElementById당신은 액세스 것 등) for로 속성을 label.htmlFor.
Sophie Alpert

3
@Meglio HTML에서 for 속성이 작동하려면 ID가 필요합니다. 구성 요소를 재사용 할 수 있도록 실제 입력 필드에서 ID 및 이름 속성으로 설정 한 구성 요소에 이름 특성을 추가 할 수 있습니다.
Wim Mostmans

2
신경 쓰지 마, 나는 여기서 대답을 찾았다 . 그들은 ID 생성기를 사용한다고 말합니다.
Tobia

2
@ BenAlpert 그것에 빛을 흘려 주셔서 감사합니다. 나는 jQuery와 물건의 DOM API를 본 적이 없었습니다 (용서하십시오). 그러나 다른 사람이 그것에 대해 더 배우고 싶다면 developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement를 확인하십시오 .
alvincrespo 2016 년


13

React의 경우 HTML 속성을 정의하려면 정의당 키워드를 사용해야합니다.

class -> className

사용되고

for -> htmlFor

반응은 대소 문자를 구분하므로 필요에 따라 작고 대문자를 따라야합니다.


3

모두 forclass는 HTML이 JSX 속성에 올 때, 다른 사용 뭔가해야 할 팀이 사용하기로 결정 반작용 왜 자바 스크립트에서 예약어입니다 htmlForclassName각각


1
그것은 그것과 전혀 관련이 없습니다. JSX 변환은 속성 이름에도 유효한 '클래스'로 변환 할 수 있습니다. 실제로 Preact에서는 class 및 className을 모두 사용할 수 있습니다.
Malte R

3
React가 JSX에서 변환 할 수는 있지만 그렇지 않습니다. 그들의 문서 ( 20-20forhtmlFor
nirvdrum

@ MalteR 당신은 IE8, IE7 및 IE6에게 그것을 말할 수 있습니다
트라이던트 D' Gao


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.