代码之家 › 专栏 › 技术社区 › Jammer

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

typescript reactjs javascript

Jammer · 技术社区 · 6 年前

我在努力弄清楚我们应该如何在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数据?

1 回复 | 直到 6 年前

Sy Tran 6 年前

你需要添加 value 到 FormControl 让它知道要渲染什么值。

加上 onChange 让它知道当dom输入改变时该做什么。在这里我们更新 state.email 重视销售订单 窗体控件 将收到新的 价值 支持和重新发送更新的电子邮件。其他输入也可以这样做。

我们还补充 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>
        }
    }
}