使用 Netlify Forms 将联系表单添加到 React 应用程序

suchonakaniz

在本教程中，您将学习如何使用 Netlify Forms 将联系表单添加到 React 应用程序。 Backward Skip 10s Play Video Forward Skip 10s 向 React 应用程序添加联系表单可能需要编写服务器端代码来处理表单提交，但使用 Netlify Forms，您可以从逻辑中解脱出来，因​​为当您的网站运行时，它会为您完成所有幕后工作。部署在Netlify上。 先决条件 要学习本教程，您应该熟悉 React、Git 和 GitHub。您还应该有一个 Netlify 帐户并在您的计算机上安装了 Node。如果您需要任何设置帮助，可以查阅我们有关如何使用 nvm 安装 Node 的指南。 你将学到什么 将 React 应用部署到 Netlify 将 Netlify Forms 与无状态表单组件（不使用状态的表单组件）集成 将 Netlify Forms 与有状态表单组件（使用状态处理其数据的表单组件）集成 本教程的完整指南可在GitHub上找到。

Netlify 表单简介 Netlify Forms 是 Netlify 的一项功能，用于管理和处理表单提交，而无需编写任何服务器端代码。通过向 HTML 表单标记添加一个简单的属性，您就可以启动并运行 Netlify Forms。表单还可以使用 JavaScript 异步提交，这使其成为由 Vue、React 和其他现代框架 决策者电子邮件列表 支持的网站的绝佳伴侣。 Netlify 表格定价 Netlify Forms 可以免费开始使用，但免费计划中每个网站每月提交的表单数量限制为 100 份，而且使用免费套餐时不包括后台功能和基于角色的访问控制等一些功能。 要超出表单提交限制或使排除的功能可用，您必须升级到其他计划。您可以在Netlify 定价页面上执行此操作。 为 Netlify 表单创建表单 Netlify Forms 可以与无状态表单（一种不使用状态来处理其数据的表单）和有状态表单（一种使用状态来处理其数据的表单）集成。



在本教程中，我们将首先创建一个无状态表单来演示如何将 Netlify Forms 与其集成。但稍后，我们会将无状态表单重构为有状态表单，其中我们还将与 Neltify Forms 集成。 让我们首先创建并设置一个新的 React 应用程序。 Learn to Code with JavaScript 创建并设置 React 在终端中键入以下命令来创建新的 React 应用程序：这里我们的应用程序的名称是netlify_forms_app，但您可以给它任何您想要的名称，只要它不是受限制的 npm 名称即可。安装完成后，切换到新创建的目录，然后使用npm start终端中的命令启动应用程序。 让我们稍微清理一下（可选）我们的应用程序。在src应用程序的目录中，删除以下文我们删除了这些文件，因为它们与我们的构建无关。我们也可以删除该reportWebVitals文件。为此，我们还需要reportWebVitals文件中删除 import 语句和函数调用，以便我们的 React 应用程序能够成功编译。