Reactjs:表单操作方法和onSubmit

时间:2017-08-22 12:12:57

标签: javascript forms reactjs

我有一种情况需要提交表格。 当我使用这种方法时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)

的错误

问题是什么,如何解决?

1 个答案:

答案 0 :(得分:2)

如果你告诉程序e.preventDefault(),那么他就不会执行正常的重定向,我们都在等待。

反之亦然,您必须将其删除才能重定向用户。如果电子邮件不正确,则仅preventDefault()