Javascript 反应表单提交-字段始终为空

我正在努力弄清楚我们应该如何处理在React中提交表单的问题。第一次用户，到目前为止，努力失败

表单中的数据总是空的，这意味着json也是空的

从我读过的所有例子来看，这应该是可行的

我的组件是一个简单的注册组件：

import * as React from 'react';
import { PropsType } from './Routes';
import { Form, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';

export default class Register extends React.Component<PropsType, any> {

    public constructor(props, context) {
        super(props, context);

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    public render() {

        return <Form horizontal onSubmit={this.handleSubmit} id={'reg-form'}>
                   <FormGroup controlId="formHEmail">
                       <Col componentClass={ControlLabel} sm={2}>
                           Email
                       </Col>
                       <Col sm={10}>
                           <FormControl type="email" placeholder="Email" />
                       </Col>
                   </FormGroup>

                   <FormGroup controlId="formPassword">
                       <Col componentClass={ControlLabel} sm={2}>
                           Password
                       </Col>
                       <Col sm={10}>
                           <FormControl type="password" placeholder="Password" />
                       </Col>
                   </FormGroup>

                   <FormGroup controlId="formConfirmPassword">
                       <Col componentClass={ControlLabel} sm={2}>
                           Confirm Password
                       </Col>
                       <Col sm={10}>
                           <FormControl type="password" placeholder="Confirm Password" />
                       </Col>
                   </FormGroup>

                   <FormGroup>
                       <Col smOffset={2} sm={10}>
                           <Button type="submit">Create Account</Button>
                       </Col>
                   </FormGroup>
               </Form>;
    }

    public handleSubmit(e) {
        e.preventDefault();

        console.log('Register.POST');

        console.log('TARGET IS: ' + e.target);

        const data = new FormData(e.target);
        console.log(data);

        const json = JSON.stringify(data);
        console.log(json);

        fetch('/api/account/register', {
            method: 'POST',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Accept': 'application/json',                  
            },
            body: json,
        }).then(res => {
            console.log(res);
        });
    }
}

import*as React from'React'；
从“/Routes”导入{PropsType}；
从“react bootstrap”导入{Form，Col，FormGroup，ControlLabel，FormControl，Button}；
导出默认类寄存器扩展React.Component{
公共构造函数（道具、上下文）{
超级（道具、背景）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
公共渲染（）{
返回
电子邮件
密码
确认密码
创建帐户
;
}
公共把手提交（e）{
e、 预防默认值（）；
console.log（'Register.POST'）；
log（'TARGET为：'+e.TARGET）；
常数数据=新的FormData（如目标）；
控制台日志（数据）；
const json=json.stringify（数据）；
log（json）；
获取（“/api/account/register”{
方法：“POST”，
标题：{
“访问控制允许来源”：“*”，
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
},
正文：json，
})。然后（res=>{
控制台日志（res）；
});
}
}

---

如何将表单中的值获取到json数据中？

您需要将

值

添加到

表单控件

中，让它知道要呈现的值

并添加

onChange

，让它知道当DOM输入发生变化时该做什么。这里我们更新了

状态。电子邮件

值，因此

FormControl

将收到新的

值

道具，并使用更新的电子邮件重新提交。您可以对其他输入执行相同的操作

我们还添加了

name

prop，它是

event.target.name

的值，以知道要更新哪个字段，因此我们不必为每个输入创建重复的句柄函数

public constructor(props, context) {
    super(props, context);
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEmailChange = this.handleChange.bind(this);
}

public handleChange (event) {
    this.setState({ [event.target.name]: event.target.value });
}

public handleSubmit() {
    console.log(this.state); // Your json data is here
}

public render() {

        return <Form horizontal onSubmit={this.handleSubmit} id={'reg-form'}>
                   <FormGroup controlId="formHEmail">
                       <Col componentClass={ControlLabel} sm={2}>
                           Email
                       </Col>
                       <Col sm={10}>
                           <FormControl
                               type="email"
                               name="email"
                               placeholder="Email" />
                               value={this.state.email}
                               onChange={this.handleChange}
                       </Col>
                   </FormGroup>
               </Form>
        }
    }
}

公共构造函数（道具、上下文）{
超级（道具、背景）；
this.state={}
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleEmailChange=this.handleChange.bind（this）；
}
公共手册更改（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
公共可处理提交（）{
console.log（this.state）；//您的json数据在这里
}
公共渲染（）{
返回
电子邮件
值={this.state.email}
onChange={this.handleChange}
}
}
}

好的，这让我走上了正轨。我还必须更改我的提交代码以使用如下状态-

constjson=json.stringify（this.state）

FormData（例如target）方法根本不起作用。