我有一种情况需要提交表格。 当我使用这种方法时1
Method 1
<form action="my_redirect_url" method="post" onSubmit={this.registerEmail.bind(this)}>
<input
type="text"
placeholder='Email address'
name='EMAIL'
value={this.state.email}
onChange={this.handleChangeEmail}
/>
<button type='submit' />
</form>
然后表单提交完美,但我错过了表单验证,即电子邮件验证部分。它的有效与否,表格重定向
Method 2
// onSubmit method
registerEmail = (e) => {
e.preventDefault();
let { email } = this.state;
let emailValidated = validateEmail(email);
if (emailValidated) {
fetch('my_redirect_url', {
method: 'post',
body : JSON.stringify({
EMAIL: email
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then(ParseJSON) // It parses the output
.catch(function(error) {
console.log("error---", error)
});
} else {
alert("invalid email")
}
}
// Form
<form onSubmit={this.registerEmail.bind(this)}>
<input
type="text"
placeholder='Email address'
name='EMAIL'
value={this.state.email}
onChange={this.handleChangeEmail}
/>
<button type='submit' />
</form>
在方法2中,验证正确完成,但它没有重定向并说出Fetch api cannot load 'my_redirect_url' Response for preflight is invalid (redirect)
问题是什么,如何解决?
答案 0 :(得分:2)
如果你告诉程序e.preventDefault()
,那么他就不会执行正常的重定向,我们都在等待。
反之亦然,您必须将其删除才能重定向用户。如果电子邮件不正确,则仅preventDefault()
。