时间戳

首页 > 解决方案 > 使用 React 将表单发布到 API

reactjs - 使用 React 将表单发布到 API

问题描述

我使用 Staticman ( staticman.net ) 在我的 Gatsby ( gatsbyjs.org ) 网站上发表评论。

我一直在使用带有参数的经典 HTML 表单method="POST"，action="https://api.staticman.net/..." 因为这是 Staticman 所期望的（文档）。

但是我想让它更“反应”，我已经将表单操作更改为一个handleSumbit()函数：

handleSubmit(event) {
  event.preventDefault()
  fetch("https://api.staticman.net/...", {
    method: "POST",
    body: event.target,
  })
}

我觉得这不起作用，因为 API 需要一个HTTP POST 请求，具有application/x-www-form-urlencoded内容类型，而 myevent.target是一个包含大量 React 信息的表单。

如何使我的fetch()请求看起来与 HTTP POST 表单提交完全一样？

标签： reactjspostfetch-apigatsby

解决方案

我会使用类似query-string包的东西从你的组件状态重建 POST 数据。不确定 staticman 的具体细节，但我认为您的反应组件状态中有表单值，因此您可以执行以下操作：

handleSubmit = (event) => {
  event.preventDefault()
  fetch("https://api.staticman.net/...", {
    method: "POST",
    body: queryString.stringify({
      this.state.username,
      this.state.subject
    })
  })
}

推荐阅读