我正在努力弄清楚我们应该如何处理 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 数据?
最佳答案
您需要将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>
}
}
}
关于javascript - React 表单提交 - 字段始终为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50660572/