Reactjs：表单操作方法和 onSubmit答案

【问题标题】：Reactjs: Form action method and onSubmitReactjs：表单操作方法和 onSubmit
【发布时间】：2018-01-30 17:20:21
【问题描述】：

我遇到需要提交表单的情况。当我使用这种方法时 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)

那么问题是什么以及如何解决？

【问题讨论】：

您缺少获取 API 的 then 部分。 fetch 不知道如何处理响应对象。
我会修改代码。我也有.then 部分
@iamsaksham API 是否属于同一个服务器？
正如错误所说，服务器未能满足您的预检请求。您是否通过浏览器的文件协议提供此文件：例如：file:///path/to/my/file.html？
@iamsaksham 有两种方法可以解决这个问题 1. 在https://xyz/abc.php 上，为传入请求启用 CORS 标头，并在您从 fetch api 发送的请求中添加 CORS 标头。 2. 添加一个 nginx 或服务器重定向，它将所有带有子路由的请求传递到https://xyz/abc.php。例如，您将在浏览器中点击localhost:3000/my_api，然后nginx 会将所有/my_api 请求重定向到https://xyz/abc.php。通过这种方式，您的客户可以访问自己的域 Id 建议使用第二个。

标签： javascript forms reactjs

【解决方案1】：

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

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

【讨论】：

是的，但是它缺少验证部分。此外，它只是将查询参数添加到 url 并重定向到该 URL。但我希望它重定向到全新的域
然后在.then()操作中执行window.location = 'www.google.com'
但它没有进入，它说一个错误。我在问题中提到。但是，是的，我会试试你说的
我想你已经部分解决了。现在我只需要为什么它会出现在catch 部分，而不是.then()
这不是我能解决的问题，因为您必须正确建立您的网站/网络服务。所以不要重定向 301 用户，而是向他发送一个 400 响应的页面成功！