我在使用 laravel 时遇到错误并做出react“无效的 DOM 属性 `for`。你的意思是 `htmlFor`”

IT技术 javascript reactjs
2021-05-04 13:08:43

我正在 Laravel 中创建一个简单的 crud 并在我遇到此错误时对 js 做出react

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>
        );
    }
}
4个回答

使用 React 时,不能for在 JSX 中使用关键字,因为这是一个 javascript 关键字(请记住,JSX 是 javascript,所以不能使用for这样的词class因为它们有其他特殊含义!)

为了避免这种情况,使用 React 元素htmlFor代替(有关更多信息,请参阅React 文档)。

所以,你的render函数应该是(我只用 替换forhtmlFor):

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>
    );
}

替换for=""htmlFor=""

在你的情况下改变这个

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

对此

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

for是 JavaScript 中的保留字,这就是为什么当涉及到 JSX 中的 HTML 属性时,您需要使用其他东西,React 团队决定htmlFor分别使用您可以从此处查看属性列表

简短回答,删除

for="blogs_name"

在你的情况下。