React忽略了标签元素的'for'属性


250

在React(Facebook的框架)中,我需要使用standard for属性渲染绑定到文本输入的label元素。

例如,使用以下JSX:

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

但是,这将导致HTML缺少必需的(和标准的)for属性:

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

我究竟做错了什么?

Answers:


484

for调用该属性是htmlFor为了与DOM属性API保持一致。如果您使用的是React的开发版本,则应该在控制台中看到关于此的警告。


4
谢谢本。您能为我解释“与DOM API的一致性”吗?
goofballLogic

17
如果你有一个label元素(如返回document.createElementdocument.getElementById等),你访问它的for财产label.htmlFor
索菲·阿尔珀特

3
@Meglio在HTML中,您需要一个ID才能使for属性起作用。为了使组件可重用,您可以在您的组件上添加一个名称属性,在实际输入字段上将其设置为ID和name属性。
Wim Mostmans 2015年

2
没关系,我在这里找到了答案。他们说使用ID生成器。
Tobia

2
@BenAlpert感谢您对此发表看法。我从来没有看过jQuery和其他东西引起的DOM API(请原谅我)。但是,如果其他人有兴趣了解更多有关此的信息,请查看developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement
alvincrespo


13

对于React,您必须使用它的每个定义关键字来定义html属性。

class -> className

用于和

for -> htmlFor

使用,因为反应区分大小写,请确保您必须遵循小写和大写的要求。


3

双方forclass在JavaScript中的保留字,这就是为什么当它涉及到HTML中JSX属性,你需要使用别的东西,做出反应的团队决定使用htmlForclassName分别


1
那绝对与那无关。JSX转换可以将其转换为“类”,这对属性名称也有效。实际上,在Preact中,您可以同时使用class和className。
Malte R

3
尽管React可以在JSX中对其进行转换,但事实并非如此。他们的文档(截至2020年3月25日)声明“由于forJavaScript中是保留字,因此应使用React元素htmlFor。”:reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum

@MalteR,您可以告诉IE8,IE7和IE6
Trident D'Gao


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.