盗墓笔记小说txt下载,小说网,盛世嫡妃凤轻小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

使用NetlifyForms將聯(lián)系表單添加到React應(yīng)用程序

將聯(lián)系表單添加到 React 應(yīng)用程序可能需要編寫服務(wù)器端代碼來處理表單提交，但是使用 Netlify Forms，您可以從邏輯中解脫出來，因?yàn)楫?dāng)您的網(wǎng)站運(yùn)行時(shí)，它會(huì)為您完成所有幕后工作部署在Netlify上。

站在用戶的角度思考問題，與客戶深入溝通，找到永新網(wǎng)站設(shè)計(jì)與永新網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋永新地區(qū)。

先決條件

要想學(xué)習(xí)本教程，您應(yīng)該熟悉 React、Git 和 GitHub。您還應(yīng)該有一個(gè) Netlify 并且在您的計(jì)算機(jī)上安裝了 Node。如果您在設(shè)置方面需要任何幫助，可以查閱我們的指南，了解如何使用 nvm 安裝 Node。

你會(huì)學(xué)到什么

在本教程結(jié)束時(shí)，您將知道如何執(zhí)行以下操作：

將 React 應(yīng)用程序部署到 Netlify。
將 Netlify Forms 與無狀態(tài)的表單組件(不使用狀態(tài)的表單組件)集成。
將 Netlify Forms 與有狀態(tài)表單組件(使用狀態(tài)處理其數(shù)據(jù)的表單組件)集成。

GitHub 上面提供了本教程的完整指南。

Netlify 表單簡介

Netlify Forms 是 Netlify 的一項(xiàng)功能，用于管理和處理表單提交，而無需編寫任何服務(wù)器端代碼。通過向 HTML 表單標(biāo)簽添加一個(gè)簡單的屬性，您就可以啟動(dòng)并運(yùn)行 Netlify Forms。表單也可以使用 JavaScript 異步提交，使其成為 Vue、React 和其他現(xiàn)代框架支持的網(wǎng)站的絕佳伴侶。

Netlify 表單定價(jià)

Netlify Forms 可以免費(fèi)開始使用，但在免費(fèi)計(jì)劃中每個(gè)網(wǎng)站每月提交 100 個(gè)別表單的限制，并且在使用免費(fèi)套餐時(shí)不包括后臺(tái)功能和基于角色的訪問控制等一些功能。

要超出表單提交限制或使排除的功能可用，您必須升級(jí)到不同的計(jì)劃。您可以在Netlify 定價(jià)頁面上執(zhí)行此操作。

為 Netlify 表單創(chuàng)建表單

Netlify 表單可以與無狀態(tài)表單(一種不使用狀態(tài)來處理其數(shù)據(jù)的表單)和有狀態(tài)表單(一種使用狀態(tài)來處理其數(shù)據(jù)的表單)集成。在本教程中，我們將首先創(chuàng)建一個(gè)無狀態(tài)表單來演示如何將 Netlify Forms 與其集成。但稍后，我們會(huì)將無狀態(tài)表單重構(gòu)為有狀態(tài)表單，其中我們還將與 Neltify Forms 集成。

讓我們重新創(chuàng)建和設(shè)置一個(gè)新的 React 應(yīng)用開始。

創(chuàng)建和設(shè)置 React

在終端中輸入以下命令來創(chuàng)建一個(gè)新的 React 應(yīng)用程序：

$ npx create-react-app netlify_forms_app

這里我們的應(yīng)用程序的名稱是netlify_forms_app，但你可以給它任何你想要的名稱，只要它不是一個(gè)受限的 npm 名稱。安裝完成后，切換到新創(chuàng)建的目錄，然后npm start在終端中使用命令啟動(dòng)應(yīng)用程序。

讓我們稍微清理一下(可選)我們的應(yīng)用程序。在src應(yīng)用程序的目錄中，刪除以下文件：

App.test.js。
logo.svg。
setupTests.js。

我們刪除了這些文件，因?yàn)樗鼈冊(cè)谖覀兊臉?gòu)建中與我們無關(guān)。我們也可以刪除reportWebVitals文件。這樣做要求我們還reportWebVitals從index.js文件中刪除 import 語句和函數(shù)調(diào)用，以便我們的 React 應(yīng)用程序成功編譯。同樣，這都是可選的，所以如果你愿意，你可以跳過這個(gè)。

現(xiàn)在，清理App.js文件，使其看起來像這樣：

// src/App.js
import './App.css';
function App() {
  return (
  );
}
export default App;

創(chuàng)建聯(lián)系表單組件

在src我們的 React 應(yīng)用程序的目錄中，創(chuàng)建一個(gè)Form.js文件并向其中添加以下代碼行：

// src/Form.js
import './form.css'
export default function Form() {
  return (
          method='POST' 
      name='contactform' 
      className='contactForm'>

              type='text' 
        name='name' 
        placeholder='Enter your name' />
              type='email' 
        name='email' 
        placeholder='Enter your email' />
              name='message' <br>        placeholder='Messaage'>
      
    

  )
}

在這里，我們有一個(gè)無狀態(tài)的存在 React 表單?，F(xiàn)在，轉(zhuǎn)到目錄App.js中的文件src并呈現(xiàn)表單。該App.js文件應(yīng)如下所示：

import './App.css';
import Form from './Form'
function App() {
  return (
    
  );
}
export default App;

使用純 CSS 樣式化表單組件

在src目錄中，創(chuàng)建一個(gè)form.css文件并添加以下樣式：

// src/form.css
.contactForm{
  padding: 10px;
  width: 90%;
  max-width: 400px;
  margin: 30px auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contactForm input, button, textarea{
  height: 50px;
  padding-left: 5px;
  font-size: 18px;
}
.contactForm textarea{
  height: 100px;
}

無需編寫任何花哨的 CSS，但如果您愿意，可以添加一些調(diào)整。使用我們添加的樣式，我們的 HTML 表單現(xiàn)在看起來如下圖所示。

要查看結(jié)果，您需要切換到netlify_forms_app文件夾并啟動(dòng)服務(wù)器：

cd netlify_forms_app
npm start

將打開一個(gè)瀏覽器，您可以在http://localhost:3000查看結(jié)果。

使用無狀態(tài) React 聯(lián)系表單處理表單

無狀態(tài) React 表單的一個(gè)完美示例是我們之前創(chuàng)建的那個(gè)。在這種形式中，我們的輸入值不受狀態(tài)控制。在本節(jié)中，我們將學(xué)習(xí)如何使用 Netlify Forms 將聯(lián)系表單添加到無狀態(tài)的 React 應(yīng)用程序。

添加表單的靜態(tài) HTML 版本

使我們的表單能夠與 Netlify Forms 一起工作的第一步是將表單的靜態(tài) HTML 版本添加到我們的 React 應(yīng)用程序目錄中的index.html文件中。public為什么我們需要添加這個(gè)表單?添加這個(gè) HTML 表單將有助于 Netlify 檢測我們的 JSX 表單，因?yàn)楹筇幚頇C(jī)器人只能解析 HTML。

對(duì)于此示例，我們將在打開文件中的標(biāo)記后立即添加此 HTML 表單index.html：

在這種形式中需要注意兩個(gè)屬性：name和netlify。該name屬性將使 Netlify 能夠與我們的 JSX 表單連接，而該netlify屬性將使 Nelify 的機(jī)器人能夠解析我們的表單。我們還使用該hidden屬性對(duì)用戶隱藏表單。無需向此表單添加標(biāo)簽或提交按鈕，因?yàn)樗鼘?duì)我們的網(wǎng)站是隱藏的。

向 JSX 表單添加隱藏的輸入元素

在目錄中的Form.js文件中src，添加一個(gè)隱藏的 input 元素，其name屬性設(shè)置為form-name，并且該value屬性等于我們表單的 HTML 版本的名稱。這些屬性是使我們的表單與 Netlify Forms 一起工作所必需的：

// src/Form.js
  type='hidden' 
  name='form-name'
  value='contactForm' />

我們表單的最終版本現(xiàn)在看起來像這樣：

// src/Form.js
  method='POST' 
  name='contactform' 
  className='contactForm'>
      type='hidden'
    name='form-name'
    value='contactForm' />
      type='text' 
    name='name' 
    placeholder='Enter your name' />
      type='email' 
    name='email' 
    placeholder='Enter your email' />
      name='message' <br>    placeholder='Messaage'>

這個(gè)表單還需要一個(gè)步驟才能開始工作：將我們的 React 應(yīng)用程序部署到 Netlify。我們將在下一節(jié)中介紹這一點(diǎn)。

部署到 Netlify

我們可以使用GitHub之類的版本控制系統(tǒng)將我們的站點(diǎn)部署到 Netlify ，也可以使用拖放的方法，這需要我們將build運(yùn)行npm run build命令創(chuàng)建的文件傳輸?shù)?Netlify拖放頁面。以下部分將介紹這兩種部署方法，但在本教程中，我們將使用 GitHub 進(jìn)行部署。

使用 GitHub 部署

從 GitHub 部署我們的 React 應(yīng)用程序?qū)槲覀冊(cè)O(shè)置持續(xù)部署，這意味著對(duì)我們的存儲(chǔ)庫所做的更改將自動(dòng)觸發(fā)我們站點(diǎn)的重新部署，這比使用拖放方法具有優(yōu)勢。

為了能夠從 GitHub 進(jìn)行部署，我們必須首先讓我們的 React 應(yīng)用程序可用。轉(zhuǎn)到 GitHub 并創(chuàng)建一個(gè)新的存儲(chǔ)庫。

對(duì)于本教程，我們將存儲(chǔ)庫命名為“NelifyForms”。現(xiàn)在在頁面底部，單擊Create Repository按鈕，我們將被重定向到新創(chuàng)建的存儲(chǔ)庫頁面。

現(xiàn)在，這個(gè)存儲(chǔ)庫是空的。那是因?yàn)槲覀冞€沒有將我們的 React 應(yīng)用程序推送到它。為此，請(qǐng)?jiān)诮K端中輸入以下命令：

$ git add *
$ git commit -m 'netlify forms with stateless form'
$ git remote add origin 
$ git push -u origin master

這些命令將創(chuàng)建一個(gè)新的提交，將我們連接到我們的 GitHub 存儲(chǔ)庫，最后將我們的 React 應(yīng)用程序推送到它。

確保更換使用新創(chuàng)建的 GitHub 存儲(chǔ)庫的 URL。這是一張圖片，顯示了在哪里可以找到新創(chuàng)建的存儲(chǔ)庫的 URL。

運(yùn)行上述git命令后，刷新瀏覽器。你會(huì)發(fā)現(xiàn)我們的 React 應(yīng)用已經(jīng)被推送到了 GitHub。

現(xiàn)在我們的 React 應(yīng)用程序在 GitHub 上可用，是時(shí)候在 Netlify 上部署它了。登錄到您的 Netlify 帳戶，轉(zhuǎn)到儀表板，然后單擊“從 Git 新建站點(diǎn)”按鈕。我們將被帶到創(chuàng)建新站點(diǎn)頁面。

單擊持續(xù)部署部分下的GitHub按鈕。然后我們被重定向到授權(quán)頁面，Netlify 將在該頁面請(qǐng)求訪問 GitHub。授予 Netlify 訪問權(quán)限后，我們將看到如下所示的頁面。

現(xiàn)在，我們之前創(chuàng)建的NetlifyForms存儲(chǔ)庫沒有顯示在存儲(chǔ)庫列表中，因?yàn)槲覀冞€沒有配置 Netlify 來訪問它。

為此，請(qǐng)單擊頁面底部的在 GitHub 上配置 Netlify 應(yīng)用程序鏈接。我們將看到如下所示的頁面。

滾動(dòng)到存儲(chǔ)庫訪問部分下的頁面底部，然后單擊選擇存儲(chǔ)庫按鈕。我們將看到我們的 GitHub 存儲(chǔ)庫列表。

選擇NelifyForms存儲(chǔ)庫，然后單擊保存以授予 Netlify 訪問此存儲(chǔ)庫的權(quán)限。保存后，我們將被重定向到 Netlify 上的創(chuàng)建新站點(diǎn)頁面。

我們的NetlifyForms存儲(chǔ)庫現(xiàn)在顯示在列表中。點(diǎn)擊它，我們會(huì)看到這樣的頁面。

在此頁面上，我們可以設(shè)置站點(diǎn)的構(gòu)建和部署選項(xiàng)，例如更改要部署的 Git 分支，或用于部署站點(diǎn)的命令。但是沒有必要這樣做，因?yàn)槟J(rèn)情況下一切看起來都很好。

最后，要將我們的站點(diǎn)部署到 Netlify，滾動(dòng)到頁面底部并單擊部署站點(diǎn)按鈕。部署可能需要一段時(shí)間，但一旦完成，我們將在站點(diǎn)儀表板頁面的右上角看到指向我們站點(diǎn)的鏈接。

至此，我們的 React 應(yīng)用程序已成功從 GitHub 部署到 Netlify。當(dāng)我們單擊鏈接時(shí)，我們將看到我們構(gòu)建的 React 表單。

使用拖放進(jìn)行部署

使用這種方法部署更簡單，但缺點(diǎn)是我們的站點(diǎn)不會(huì)設(shè)置為持續(xù)部署。如果我們的 React 應(yīng)用程序在 GitHub、GitLab 或 Bitbucket 上可用，我們可以在部署后手動(dòng)設(shè)置。

要使用拖放方法，我們必須首先構(gòu)建我們的 React 應(yīng)用程序。打開終端并導(dǎo)航到我們的 React 應(yīng)用程序所在的目錄，然后輸入以下命令：

$ npm run build

build構(gòu)建完成后，在 React 應(yīng)用程序的根目錄中應(yīng)該有一個(gè)名為的新文件夾。我們的目錄結(jié)構(gòu)現(xiàn)在看起來像這樣：

> build
> node_modules
> public
> src

現(xiàn)在剩下的就是將這個(gè)文件夾拖放到Netlify的拖放頁面中。

我們可以通過在系統(tǒng)文件資源管理器中導(dǎo)航到我們的 React 應(yīng)用程序的位置來做到這一點(diǎn)，然后將build文件夾拖放到Netlify 的拖放頁面。

這是一個(gè) GIF 來說明這一點(diǎn)。

一旦我們將文件夾拖放build到 Netlify，它將被上傳和部署。然后我們將被重定向到我們網(wǎng)站的儀表板頁面。已部署站點(diǎn)的 URL 位于頁面的右上角。

單擊該 URL，您將看到我們構(gòu)建的聯(lián)系表。填寫表格并點(diǎn)擊提交按鈕。您將被重定向到感謝確認(rèn)頁面。

涼爽的!我們已經(jīng)成功地使我們的無狀態(tài) React 表單與 Netlify Forms 一起工作?，F(xiàn)在，通過我們的應(yīng)用程序提交的每個(gè)表單都由 Netlify Forms 處理。

目前，當(dāng)提交新表單時(shí)，我們不會(huì)通過電子郵件收到任何通知，因?yàn)槲覀冞€沒有設(shè)置表單提交將被發(fā)送到的電子郵件地址。我們將很快介紹這一點(diǎn)。

管理聯(lián)系表單提交

Netlify 不僅使添加聯(lián)系表格變得簡單，而且還包括通過我們的聯(lián)系表格提交的內(nèi)容可以被刪除、標(biāo)記為垃圾郵件或下載的功能。還有空間將我們的表單與 Netlify 的無服務(wù)器功能集成。你可以在這里閱讀。

要訪問提交管理頁面，請(qǐng)轉(zhuǎn)到之前在 Netlify 上部署的站點(diǎn)儀表板頁面，然后單擊導(dǎo)航欄中的表單鏈接。

單擊表單鏈接后，您將被重定向到表單儀表板頁面。

點(diǎn)擊Active forms部分下的contactForm以查看通過我們的聯(lián)系表提交的管理頁面。

添加通知和自定義確認(rèn)頁面

在本節(jié)中，我們將介紹如何添加通知功能，使我們能夠接收新表單提交的電子郵件通知。我們還將介紹如何自定義表單成功提交后顯示的感謝確認(rèn)頁面。

通過電子郵件接收通知

在我們站點(diǎn)的儀表板中，導(dǎo)航到站點(diǎn)設(shè)置>表單>表單通知。然后單擊添加通知按鈕。將彈出一個(gè)菜單。

Netlify 為我們提供了三個(gè)關(guān)于如何接收通知的選項(xiàng)。在本教程中，我們將使用電子郵件通知。

單擊電子郵件通知并填寫出現(xiàn)的表格。

我們更關(guān)心的字段是Email to notify字段。確保輸入您希望接收電子郵件通知的電子郵件地址。

現(xiàn)在，當(dāng)我們打開已部署的站點(diǎn) URL 并提交新表單時(shí)，我們應(yīng)該會(huì)收到一封電子郵件通知。

自定義確認(rèn)頁面

自定義確認(rèn)頁面，第一步是為目錄中文件的元素添加一個(gè)action屬性：formindex.htmlpublic。

// public/index.htmm

...

我們已將action屬性設(shè)置為 equal /confirmation-page。這將告訴 Netlify 在提交表單后重定向到此頁面。雖然會(huì)重定向到確認(rèn)頁面，但 URL 路徑不會(huì)發(fā)生變化。要同時(shí)更改 URL 路徑，我們還需要將action屬性添加到文件中的 JSX 表單Form.js：

// src/Form.js
...
  method='POST' 
  name='contactform' 
  className='contactForm'
  action='/confirmation-page'>
...

完成此操作后，接下來就是創(chuàng)建確認(rèn)頁面。

在public我們的 React 應(yīng)用程序的目錄中，創(chuàng)建一個(gè)confirmation-page.html文件并添加以下代碼行：




  
    
    confirmation0 page
  
  
    
      Thank you

      You will be replied to shortly

為了測試確認(rèn)頁面是否有效，我們必須重新部署我們的站點(diǎn)。我們從 GitHub 部署了我們的網(wǎng)站，這是一件好事。我們現(xiàn)在要重新部署它所要做的就是編寫一些 Git 命令，瞧!我們的網(wǎng)站將在 Netlify 上自動(dòng)重新部署。

以下是命令：

$ git add *
$ git commit -m 'added confirmation page'
$ git push

這些命令創(chuàng)建一個(gè)新的提交并修改我們的 GitHub 存儲(chǔ)庫。由于我們已將 Netlify 連接到NetlifyFormsGitHub 上的存儲(chǔ)庫，因此當(dāng)對(duì)其進(jìn)行修改時(shí)，Netlify 會(huì)立即注意到該修改并重新部署我們的站點(diǎn)。

重新部署我們的網(wǎng)站并提交新表單后，我們將看到確認(rèn)頁面。

有狀態(tài)的 React 表單中的表單處理

在本節(jié)中，我們將學(xué)習(xí)如何使用基于類的組件和 React 鉤子使用 Netlify Forms 將聯(lián)系表單添加到有狀態(tài)的 React 應(yīng)用程序。

我們將使用我們?cè)凇笆褂脽o狀態(tài) React 聯(lián)系表單處理表單”部分中創(chuàng)建的表單。

注意：在本節(jié)中，我們不會(huì)介紹部署或如何接收電子郵件通知。我們已經(jīng)在前面的部分中介紹過。

使用基于類的組件處理表單

要使用我們?cè)谏弦还?jié)中創(chuàng)建的表單(以演示如何將 Netlify 表單與有狀態(tài)的 React 表單一起使用)，我們首先必須將表單從無狀態(tài)表單更改為有狀態(tài)表單。

該Form.js文件應(yīng)如下所示：

// src/Form.js
import './form.css'
import {Component} from 'react'
export default class Form extends Component{
  constructor(props){
    super(props)
    this.state = { name: '', email: '', message: '' }
  }
  handleChange = e =>
    this.setState({ [e.target.name]: e.target.value })
  render() {
    const { name, email, message } = this.state
    return (
      
                  type='text' 
          name='name' 
          value={name}
          placeholder='Enter your name'
          onChange={this.handleChange} />
                  type='email' 
          name='email' 
          value={email}
          placeholder='Enter your email'
          onChange={this.handleChange} />
                  name='message' <br>          placeholder='Messaage'<br>          value={message}<br>          onChange={this.handleChange}>
        
      
    )
  }
}

下一步是創(chuàng)建一個(gè)負(fù)責(zé)發(fā)布表單提交的方法。為此，我們必須首先onSubmit向表單添加一個(gè)事件偵聽器：

// src/Form.js
...
  className='contactForm' 
  onSubmit={this.handleSubmit}>
...

現(xiàn)在，讓我們創(chuàng)建一個(gè)handleSubmit方法，它將新的表單提交發(fā)布到 Netlify Forms。

handleChange在組件中的方法后面添加如下代碼Form：

// src/Form.js
...
handleSubmit = e => {
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: encode({ 'form-name': 'contactForm', ...this.state })
  })
    .then(() => alert('Success!'))
    .catch(error => alert(error))
  e.preventDefault()
}
...

請(qǐng)注意，在請(qǐng)求的正文中，我們使用了一個(gè)encode函數(shù)。我們將很快創(chuàng)建它。此函數(shù)在發(fā)布之前對(duì)表單中的特殊字符 ( ?, =, /, ) 進(jìn)行編碼。

最后，在組件之前添加以下代碼行Form：

...
const encode = (data) => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&');
}
...

我們的Form.js文件現(xiàn)在應(yīng)該如下所示：

// src/Form.js
import './form.css'
import {Component} from 'react'
const encode = (data) => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&');
}
export default class Form extends Component{
  constructor(props){
    super(props)
    this.state = { name: '', email: '', message: '' }
  }
  handleChange = e =>
    this.setState({ [e.target.name]: e.target.value })
  handleSubmit = e => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'contactForm', ...this.state })
    })
      .then(() => alert('Success!'))
      .catch(error => alert(error))
    e.preventDefault()
  }
  render() {
    const { name, email, message } = this.state
    return (
              className='contactForm' 
        onSubmit={this.handleSubmit}>
                  type='text' 
          name='name' 
          value={name}
          placeholder='Enter your name'
          onChange={this.handleChange} />
                  type='email' 
          name='email' 
          value={email}
          placeholder='Enter your email'
          onChange={this.handleChange} />
                  name='message' <br>          placeholder='Messaage'<br>          value={message}<br>          onChange={this.handleChange}>

        
      
    )
  }
}

此表單只有在我們?yōu)槠洳渴鸷驮O(shè)置電子郵件通知時(shí)才能正常工作。這在前面的部分中有所介紹。

使用 React 鉤子處理表單

我們將在本節(jié)中使用的 React 鉤子是useState鉤子。該useState鉤子將讓我們向功能組件添加狀態(tài)。

要在我們之前創(chuàng)建useState的組件中使用鉤子Form，我們首先需要導(dǎo)入useState鉤子，然后將基于類的Form組件轉(zhuǎn)換為函數(shù)式組件。