Javascript 如何提交表单数据中的多个字段：ReactJS？

我有这样的输入字段，如下图所示：

原始数据：

{
    "title": "",
    "slug": "",
    "image": "",
    "description": ""
}

如上图所示，端点url：

我的想法是，每当用户在字段中输入值时（如上图所示），如果用户加热submit按钮，数据就会插入数据库。

我可能是新手。如果有人能帮我找出哪里做错了，那就太好了。事先非常感谢你

import React, {Component} from 'react';

export default class App extends React.Component{
        constructor(props) {
               super(props);
               this.state ={
               file:null
             }
             this.onFormSubmit = this.onFormSubmit.bind(this)
             this.onChange = this.onChange.bind(this)
             this.fileUpload = this.fileUpload.bind(this)
             }
             onFormSubmit(e){
             e.preventDefault() // Stop form submit
             this.fileUpload(this.state.file).then((response)=>{
             console.log(response.data);
             })
             }
            onChange(e) {
            this.setState({file:e.target.files[0]})
            }

            const title = document.querySelector('#title') ;
            const slug = document.querySelector('#slug') ;
            const image = document.querySelector('#image') ;
            const desc = document.querySelector('#description') ;

            const formData = new FormData();

            formData.append('title', title.value);
            formData.append('slug', slug.value);
            formData.append('image', image.files[0]);
            formData.append('description', desc.value);

            const options = {
              method: 'POST',
              body: formData
            };

            fetch('http://localhost:8000/api/create', options);

        render(){

        return(

            <div>
              <form onSubmit={this.onFormSubmit}>
              <h1>File Upload</h1>
              <input type="text" onChange={this.onChange} />
               <input type="text" onChange={this.onChange} />
               <input type="file" onChange={this.onChange} />
               <input type="text" onChange={this.onChange} />
              <button type="submit">Upload</button>
              </form>
            </div>

            )
    }
}

import React，{Component}来自'React'；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
文件：空
}
this.onFormSubmit=this.onFormSubmit.bind（this）
this.onChange=this.onChange.bind（this）
this.fileUpload=this.fileUpload.bind（this）
}
onFormSubmit（e）{
e、 preventDefault（）//停止表单提交
this.fileUpload（this.state.file）。然后（（响应）=>{
console.log（response.data）；
})
}
onChange（e）{
this.setState（{file:e.target.files[0]}）
}
const title=document.querySelector（“#title”）；
常量slug=document.querySelector（“#slug”）；
const image=document.querySelector（“#image”）；
const desc=document.querySelector（“#description”）；
const formData=new formData（）；
formData.append（'title'，title.value）；
formData.append（'slug'，slug.value）；
formData.append（'image'，image.files[0]）；
formData.append（'说明'，说明值）；
常量选项={
方法：“POST”，
正文：formData
};
取（'http://localhost:8000/api/create",选择),；
render（）{
返回(
文件上传
上载
)
}
}

标题

字段也是文件吗？我不这么认为

const title=document.querySelector（'#title'）；
常量slug=document.querySelector（“#slug”）；
const image=document.querySelector（“#image”）；
const desc=document.querySelector（“#description”）；
const formData=new formData（）；
formData.append（'title'，title.value）；
formData.append（'slug'，slug.value）；
formData.append（'image'，image.files[0]）；
formData.append（'说明'，说明值）；

然后在这段代码上写一个额外的

}

：

const选项={
方法：“POST”，
正文：formData，
}
};

标题

字段也是文件吗？我不这么认为

const title=document.querySelector（'#title'）；
常量slug=document.querySelector（“#slug”）；
const image=document.querySelector（“#image”）；
const desc=document.querySelector（“#description”）；
const formData=new formData（）；
formData.append（'title'，title.value）；
formData.append（'slug'，slug.value）；
formData.append（'image'，image.files[0]）；
formData.append（'说明'，说明值）；

然后在这段代码上写一个额外的

}

：

const选项={
方法：“POST”，
正文：formData，
}
};

在

body:formData，

之后的代码中有一个额外的

，因此请修复该问题

.....
const options = {
                  method: 'POST',
                  body: formData,
                };
fetch('http://localhost:8000/api/create', options);

编辑

您正在使用

jsx

在return语句中编写代码。把它搬到外面去。即使这样，您也应该将此逻辑移到渲染方法之外

import React, {Component} from 'react';

class App extends React.Component{



 render(){
    const title = document.querySelector('#title') ;
    const slug = document.querySelector('#slug') ;
    const image = document.querySelector('#image') ;
    const desc = document.querySelector('#description') ;

    const formData = new FormData();

    formData.append('title', title.value);
    formData.append('slug', slug.value);
    formData.append('image', image.files[0]);
    formData.append('description', desc.value);

    const options = {
        method: 'POST',
        body: formData,
    };

    fetch('http://localhost:8000/api/create', options);

    return (<div></div>)
  }
}

---

在

主体：formData，

之后的代码中有一个额外的

}

，因此请修复该问题

.....
const options = {
                  method: 'POST',
                  body: formData,
                };
fetch('http://localhost:8000/api/create', options);

编辑

您正在使用

jsx

在return语句中编写代码。把它搬到外面去。即使这样，您也应该将此逻辑移到渲染方法之外

import React, {Component} from 'react';

class App extends React.Component{



 render(){
    const title = document.querySelector('#title') ;
    const slug = document.querySelector('#slug') ;
    const image = document.querySelector('#image') ;
    const desc = document.querySelector('#description') ;

    const formData = new FormData();

    formData.append('title', title.value);
    formData.append('slug', slug.value);
    formData.append('image', image.files[0]);
    formData.append('description', desc.value);

    const options = {
        method: 'POST',
        body: formData,
    };

    fetch('http://localhost:8000/api/create', options);

    return (<div></div>)
  }
}

---

---

你能添加你得到的语法错误吗？我强烈建议你仔细阅读

React

文档，了解如何处理表单--你在这里所做的是不正确的，甚至不应该工作。一旦您了解了如何在

React

中处理表单，请仔细阅读此示例-在

正文：formData，

之后从代码中删除额外的

}

。看到我的回答了吗？你能补充一下你得到的语法错误吗？我强烈建议你仔细阅读

React

文档，了解如何处理表单--你在这里所做的是不正确的，甚至不应该起作用。一旦您了解了如何在

React

中处理表单，请仔细阅读此示例-在

正文：formData，

之后从代码中删除额外的

}

。看我的回答是的，我犯了一个常见的错误，谢谢你指导我。现在我在

method:POST中得到了相同的错误是的，即使我清除了这个错误，仍然得到了相同的问题。我已经更新了我的问题。请再看一看。你们有窗户吗？如果是，请删除node_模块和package-lock.json并在那里安装agianhey，我已经编辑了我的问题。请再看一看@Hamidyou在render方法中编写构造函数和其他函数，将这些代码移出Rendery我犯了一个常见错误，谢谢您的指导。现在我在
method:POST中得到了相同的错误是的，即使我清除了这个错误，仍然得到了相同的问题。我已经更新了我的问题。请再看一看。你们有窗户吗？如果是，请删除node_模块和package-lock.json并在那里安装agianhey，我已经编辑了我的问题。请再看一看@Hamidyou在render方法中编写构造函数和其他函数，将这些代码移出Rendery，即使我清除了这些代码，仍然会遇到同样的问题。我已经更新了我的问题。请再看一下我的问题。是相同的
语法错误吗？您可以显示整个错误消息吗？请参见编辑，您正在
返回
语句中写入语句谢谢