javascript - React 表单提交 - 字段始终为空

Question

我正在努力弄清楚我们应该如何处理 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);
        });
    }
}

如何将表单中的值转换为 json 数据？

Answer 1

您需要将value 添加到FormControl 以让它知道要呈现什么值。

并添加 onChange 让它知道当 DOM 输入改变时要做什么。在这里，我们更新了 state.email 值，这样 FormControl 将接收新的 value 属性并使用更新后的电子邮件重新呈现。您可以对其他输入执行相同的操作。

我们还添加了 name 属性，它是 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>
        }
    }
}