我正在使用React得到一个错误：“无效的DOM属性` you‘，您的意思是’`htmlFor`‘吗？”
我正在使用React得到一个错误：“无效的DOM属性` you‘，您的意思是’`htmlFor`‘吗？”
提问于 2020-01-27 02:26:33
我正在为我的前端创建一个简单的CRUD应用程序，我在这个错误上遇到了麻烦：
app.js:21988 Warning: Invalid DOM property `for`. Did you mean `htmlFor`?这是我的密码：
import React, { Component } from 'react';
import axios from 'axios';
export default class Add extends Component {
constructor()
{
super();
this.state={
blogs_name:''
}
}
render() {
return (
<div>
<form>
<div className="form-group">
<label for="blogs_name">Title</label>
<input
type="text"
className="form-control"
id="blogs_name"
value={this.state.blogs_name}
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
}我假设它必须对我标签中的for属性做些什么。
任何帮助都是非常感谢的。
回答 4
Stack Overflow用户
发布于 2020-01-27 02:29:19
在使用React时，您不能在JSX中使用for关键字，因为这是一个javascript关键字(记住，JSX是javascript，所以不能使用像for和class这样的单词，因为它们还有其他特殊的含义！)
要避免这种情况，使用htmlFor代替React元素(有关更多信息，请参见反应文档 )。
因此，您的render函数应该是(我只用htmlFor替换了for )：
render() {
return (
<div>
<form onSubmit={this.onSubmit} >
<div className="form-group">
<label htmlFor="blogs_name">Title</label>
<input type="text" className="form-control" id="blogs_name"
value={this.state.blogs_name}
onChange={this.onChangeBlogsName} />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
);
}Stack Overflow用户
发布于 2021-03-14 14:51:43
将for=""替换为htmlFor=""
在您的情况下，请更改此
<label for="blogs_name">Title</label>到这个
<label htmlFor="blogs_name">Title</label>Stack Overflow用户
发布于 2020-01-27 03:15:15
for是JavaScript中的一个保留词--这就是为什么当涉及到JSX中的HTML时，您需要使用其他的东西，响应团队决定分别使用htmlFor。您可以检查这里中的属性列表
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59924585
复制相关文章
相似问题
腾讯云开发者
