时间戳

首页 > 解决方案 > 如何在 React 上处理没有 AJAX 调用的常规表单？

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

问题描述

我正在尝试访问一个https://api.com/signup.ashx与 CORS 有问题的端点。所以我被要求在没有 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 的情况，这不取决于我。我只是被要求按照我提到的那样去做。

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

标签： javascripthtmlreactjsecmascript-6

解决方案

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

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

推荐阅读