当前,我具有以下功能,如果我手动编码要发送的数据,则可以正确执行POST
constructor() {
super()
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const form = new FormData(event.target);
axios({
method: 'post',
url: 'http://localhost:3003/register',
data: qs.stringify({
email: 'testing', //as you can see I have handcoded the data, and it posts properly
password: 'testing'
}),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
}
render() {
return (
<div className="content-landing">
<form onSubmit={this.handleSubmit}>
<label htmlFor="email">Enter email</label>
<input id="email" name="email" type="email" />
<label htmlFor="password">Enter password</label>
<input id="password" name="password" type="password" />
<button>Register</button>
</form>
</div>
)
}
}
但是我如何用表单中的数据在axios中提供此发布请求?
axios({
method: 'post',
url: 'http://localhost:3003/register',
data: qs.stringify({
form //referencing const form
}),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
我已经尝试了上面的代码来获取具有表单数据的const表单,但是它不会做任何事情。
所以我迷路了,因为我不知道如何用表单中的数据来满足请求。
答案 0 :(得分:3)
那么,您需要以一种反应方式来执行此操作,即将电子邮件和密码输入的值保持在一个状态,并在需要时检索它们。
要保持电子邮件的值不变,请在电子邮件和密码输入上添加一个onChange
事件处理程序,如下所示:
<input id="email" name="email" type="email" onChange={this.handleChange} value={this.state.email} />
<input id="password" name="password" type="password" onChange={this.handleChange} value={this.state.password} />
使用handleChange
,如下所示:
handleChange = (evt)=> { // If you are using typescript, type evt like this evt: React.ChangeEvent<HTMLInputElement>
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleChange
函数将同时保存email
和password
的状态。现在,您可以像这样检索它们并在需要时使用它们:
const {email, password} = this.state;
哦,首先要记住初始化email
和password
的值
我已更新您的代码,如下所示:
class MyAwesomeComponent extends React.Component {
constructor() {
super()
this.state = {
email: "",
password: ""
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this)
}
handleChange = (evt)=> {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
const form = new FormData(event.target);
const {email, password} = this.state;
axios({
method: 'post',
url: 'http://localhost:3003/register',
data: qs.stringify({email,password}),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
}
render() {
return (
<div className="content-landing">
<form onSubmit={this.handleSubmit}>
<label htmlFor="email">Enter email</label>
<input id="email" name="email" type="email" onChange={this.handleChange} value={this.state.email} />
<label htmlFor="password">Enter password</label>
<input id="password" name="password" type="password" onChange={this.handleChange} value={this.state.password} />
<button>Register</button>
</form>
</div>
)
}
}
export default MyAwesomeComponent
有关更多信息,请查看React.js documentation
答案 1 :(得分:-1)
更改此代码
data: qs.stringify({
email: event.target.email.value,
password: event.target.password.value
})