Javascript I'；m使用laravel和react获得错误；“”的DOM属性“”无效。你是说“htmlFor”吗；

我在laravel中创建了一个简单的crud，并在遇到这个错误时对js进行了反应

app.js:21988 Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
    in label (created by Add)
    in div (created by Add)
    in form (created by Add)
    in div (created by Add)
    in Add (created by Context.Consumer)
    in Route (created by Index)
    in div (created by Index)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Index)
    in Index (created by Context.Consumer)
    in Route (created by Header)
    in div (created by Header)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Header)
    in Header (created by Index)
    in div (created by Index)
    in div (created by Index)
    in div (created by Index)
    in div (created by Index)
    in div (created by Index)
    in Index

这是我的代码

import React, { Component } from 'react';
import axios from 'axios';

export default class Add extends Component {

    constructor()
    {
        super();
        this.onChangeBlogsName = this.onChangeBlogsName.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state={
            blogs_name:''

        }
    }
    onChangeBlogsName(e){
        this.setState({
            blogs_name:e.target.value
        });

    }

    onSubmit(e)
    {
        e.preventDefault();
        const blogs = {
            blogs_name : this.state.blogs_name

        }

        axios.post('http://127.0.0.1:8000/blogs/store' ,blogs)
        .then(res=>console.log(res.data));
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit} >
                     <div className="form-group">
                        <label for="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>
        );
    }
}

import React，{Component}来自'React'；
从“axios”导入axios；
导出默认类添加扩展组件{
构造函数（）
{
超级（）；
this.onChangeBlogsName=this.onChangeBlogsName.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
这个州={
日志\u名称：“”
}
}
onChangeBlogsName（e）{
这是我的国家({
博客名称：e.target.value
});
}
提交（e）
{
e、 预防默认值（）；
常量博客={
blogs\u name:this.state.blogs\u name
}
轴心柱http://127.0.0.1:8000/blogs/store",博客)
。然后（res=>console.log（res.data））；
}
render（）{
返回(
标题
提交
);
}
}

使用React时，您不能在JSX中使用

for

关键字，因为这是一个javascript关键字（请记住，JSX是javascript，所以像

for

和

class

这样的词不能使用，因为它们有其他特殊含义！）

为了避免这种情况，React元素使用

htmlFor

（有关更多信息，请参阅）

因此，您的

render

函数应该是（我只将

for

替换为

htmlFor

）：

render（）{
返回(
标题
提交
);
}

for

在JavaScript中是一个保留字这就是为什么当涉及到JSX中的HTML属性时，您需要使用其他东西，React团队决定分别使用

htmlFor

。您可以从

简短回答，删除中查看属性列表

for="blogs_name"

在您的情况下。

用

htmlFor=“”

在你的情况下，改变这个

<label for="blogs_name">Title</label>

标题

对此

<label htmlFor="blogs_name">Title</label>

标题

这是否回答了您的问题？谢谢简单的解释！

<label htmlFor="blogs_name">Title</label>