我正在使用 ReactJS 开发一个 Web 应用程序，我在其中创建了一个表单并将所有输入字段的值存储到应用程序的状态中。也就是说，我的 App.js 文件的状态包含在 Form.js 文件中创建的所有输入字段的值。我希望将状态中存储的信息传递到后端，以便我可以基于它处理数据集。 如何添加一个功能，以便在单击提交按钮时，我的应用程序状态中的所有内容都会传递到后端——比如文本文件或 json 文件。
基本上我想根据用户在表单中提供的信息（使用 ReactJS）搜索数据集（使用 Elasticsearch）。
我是 React 新手，所以我没有太多知识。我已经制作了网络应用程序，但我需要有关如何将通过表单获得的信息传递到后端的建议，以便我可以做进一步的工作。
【问题讨论】：
标签： javascript reactjs elasticsearch bootstrap-4
如何添加功能以便在单击提交按钮时 我的应用程序状态中的所有内容都会传递到后端 - 比如说 到文本文件，或在 json 文件中。
您可以使用 Axios 或 Fetch API 请求数据以在您的应用程序中使用。您可以使用两种最流行的方法使用 REST API，即 Axios（基于 Promise 的 HTTP 客户端）和 Fetch API（浏览器内置的 Web API）。
fetch() API 是一种用于从服务器或 API 端点获取资源的内置 JavaScript 方法。类似于 XMLHttpRequest
Axios 是一个易于使用的基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。由于 Axios 是基于 Promise 的，我们可以利用 async 和 await 来获得更具可读性和异步性的代码。借助 Axios，我们可以拦截和取消请求，它还具有内置功能，可提供客户端保护，防止跨站请求伪造。
想了解更多可以参考this
您可以参考多个博客和文档以了解更多信息：
Use axios to fetch data from an api in ReactJS
Difference between Axios and Fetch API
最近，我还创建了一个应用程序，其中我正在将 React 与 SpringBoot 应用程序集成。
在此应用程序中。我已经使用 axios 设置了路由器和路由，创建并提交了表单，称为 GET、POST、PUT、DELETE 请求（也使用 fetch API 完成）。
submitBook= event =>{
event.preventDefault();
const book = {
title: this.state.title,
author: this.state.author,
coverphotoURL: this.state.coverphotoURL,
isbnNumber: this.state.isbnNumber,
price: this.state.price,
language: this.state.language
};
const headers = new Headers();
headers.append("Content-Type", "application/json");
fetch("http://localhost:8080/rest/books",{
method:"POST",
body:JSON.stringify(book),
headers
})
.then(response => response.json())
.then((book) => {
if(book){
this.setState({"show":true, "method":"post"});
setTimeout(() => this.setState({"show":false}),3000);
}
else{
this.setState({"show":false});
}});
this.setState(this.initialState);
};
查看完整代码，可以参考我的Github Repository
【讨论】：
您需要考虑制作 XHR 或使用 fetch API（或 axios）向后端 API 发出 http 请求。
【讨论】：
使用 axios 调用您在后端定义的 api url。您可以在 youtube 上观看简短教程以熟悉基础知识。
【讨论】：
您可能希望使用 MDN 中记录的 Fetch API。它处理 url 请求，包括通过 HTTP 解析数据的 REST API，例如JSON 对象等。
【讨论】：