如何在 React 上处理没有 AJAX 调用的常规表单？答案

【问题标题】：How can I handle a regular form with no AJAX call on React?如何在 React 上处理没有 AJAX 调用的常规表单？
【发布时间】：2020-10-10 04:12:06
【问题描述】：

我正在尝试访问与 CORS 存在问题的端点 https://api.com/signup.ashx。所以我被要求在没有 axios 或 fetch 或类似的东西的情况下进行 API 调用。

所以我这样做了：

const handleSubmit = async (event) => {
    let error = false
    let message = ""

    Object.keys(value).forEach((element) => {
      let val = value[element]
      if (!val) {
        error = true
        message = "Please complete all required fields."
      }

      if (element == "email" && val && !validateEmail(val)) {
        error = true
        message = "Please enter valid email address"
      }
    })

    if (error) {
      alert(message)
    } else {
      try {
        console.log("succesful response")
      } catch (error) {
        console.log("error", error)
      }
    }

    event.preventDefault()
  }

return (
      <form
        id="signup"
        name="signup"
        method="post"
        autocomplete="off"
        onsubmit={handleSubmit}
        action="https://api.com/signup.ashx"
      >...</form>
)

我们不关心页面是否重新加载。问题是它会重新加载并将用户带到错误路线：

locahost:8000/?result=error 这让我觉得对端点的调用不起作用。

关于 CORS 的情况，这不是我的事。我只是被要求按照我提到的那样去做。

那么你知道我的代码有什么问题吗？

【问题讨论】：

您是否通过网络开发人员选项卡检查了实际的 HTTP 响应？
@Pointy 它甚至没有进行 API 调用。我的意思是，在网络选项卡中，我没有看到该 URL 被点击。

标签： javascript html reactjs ecmascript-6

【解决方案1】：

react 中的导航由路由器控制。您必须使用路由器而不是表单的操作。参考React Router v4 Redirecting on form submit

event.preventDefault 也应该是提交函数中的第一条语句。

【讨论】：