如何在没有外部API的情况下在React中发布表单数据

如何解决如何在没有外部API的情况下在React中发布表单数据

我正在与Amazon的Mechanical Turk合作，试图建立一个ExternalQuestion网站，该网站使用表单将数据回传到AMT，这是从其API要求的，从ExternalQuestion返回答案的典型方法。

非常特别的是，我试图在ReactJS中做到这一点，因为它简化了该项目的所有其他方面。

是否可以在不使用Flask / python之类的外部后端的情况下获取React到POST表单数据？

这是一个重要的要求，因为据我所知this information（以及我自己浪费的时间），使用Flask / python会使POST数据看起来像是来自服务器的，而不是来自服务器的数据。工作者的浏览器，将被拒绝。

但是，当我浏览React documentation on forms时，我什至没有看到关于GET和POST之类的表单方法的讨论。我知道React希望通过类似onClick（）函数的方式来处理此问题，但是在React中，如果没有使数据看起来像是来自我的服务器而不是Worker的浏览器，我将看不到任何方法。>

解决方法

Form post只是XHR POST，带有form-data或x-www-form-urlencoded正文，并返回文本/ HTML。可以在带有Axios的React上完成。

此答案显示了使用Axios发送表单数据-> https://stackoverflow.com/a/47630754/3849555

您最好的选择是通过FormData界面使用内置的JavaScript Fetch API。

对于主体，您可以传递有效载荷，这些载荷可以通过FormData接口生成； MDN的文档：

FormData接口提供了一种方法，可以轻松地构造一组代表表单字段及其值的键/值对，然后可以使用XMLHttpRequest.send（）方法轻松发送该键/值对。如果编码类型设置为“ multipart / form-data”，则使用与表单相同的格式。

不要使用XMLHttpRequest，fetch是在此基础上更新的。

带有提取的通用示例如下所示：

const formData = new FormData();

formData.append('username','abc123');
formData.append('foo','bar);

fetch('https://example.com/foo/bar',{
  method: 'POST',body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:',error))
.then(response => console.log('Success:',JSON.stringify(response)))

然后可以根据诸如onClick之类的用户操作来调用此提取调用。