日韩欧美A级久久久片,亚洲人妻无码探花,黄片在线免费观看播放

新聞中心

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

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

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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到永新網(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è)郵箱。業(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 與無(wú)狀態(tài)的表單組件(不使用狀態(tài)的表單組件)集成。
將 Netlify Forms 與有狀態(tài)表單組件(使用狀態(tài)處理其數(shù)據(jù)的表單組件)集成。

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

Netlify 表單簡(jiǎn)介

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

Netlify 表單定價(jià)

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

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

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

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

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

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

在終端中輸入以下命令來(lái)創(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)建中與我們無(wú)關(guān)。我們也可以刪除reportWebVitals文件。這樣做要求我們還reportWebVitals從index.js文件中刪除 import 語(yǔ)句和函數(shù)調(diào)用，以便我們的 React 應(yīng)用程序成功編譯。同樣，這都是可選的，所以如果你愿意，你可以跳過(guò)這個(gè)。

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

// 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è)無(wú)狀態(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;
}

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

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

cd netlify_forms_app
npm start

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

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

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

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

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

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

在這種形式中需要注意兩個(gè)屬性：name和netlify。該name屬性將使 Netlify 能夠與我們的 JSX 表單連接，而該netlify屬性將使 Nelify 的機(jī)器人能夠解析我們的表單。我們還使用該hidden屬性對(duì)用戶隱藏表單。無(wú)需向此表單添加標(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)在看起來(lái)像這樣：

// 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è)步驟才能開(kāi)始工作：將我們的 React 應(yīng)用程序部署到 Netlify。我們將在下一節(jié)中介紹這一點(diǎn)。

部署到 Netlify

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

使用 GitHub 部署

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

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

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

現(xiàn)在，這個(gè)存儲(chǔ)庫(kù)是空的。那是因?yàn)槲覀冞€沒(méi)有將我們的 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ǔ)庫(kù)，最后將我們的 React 應(yīng)用程序推送到它。

確保更換使用新創(chuàng)建的 GitHub 存儲(chǔ)庫(kù)的 URL。這是一張圖片，顯示了在哪里可以找到新創(chuàng)建的存儲(chǔ)庫(kù)的 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)頁(yè)面。

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

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

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

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

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

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

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

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

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

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

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

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

$ npm run build

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

> build
> node_modules
> public
> src

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

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

這是一個(gè) GIF 來(lái)說(shuō)明這一點(diǎn)。

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

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

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

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

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

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

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

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

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

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

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

通過(guò)電子郵件接收通知

在我們站點(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)我們打開(kāi)已部署的站點(diǎn) URL 并提交新表單時(shí)，我們應(yīng)該會(huì)收到一封電子郵件通知。

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

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

// public/index.htmm

...

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

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

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

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




  
    
    confirmation0 page
  
  
    
      Thank you

      You will be replied to shortly

為了測(cè)試確認(rèn)頁(yè)面是否有效，我們必須重新部署我們的站點(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ǔ)庫(kù)。由于我們已將 Netlify 連接到NetlifyFormsGitHub 上的存儲(chǔ)庫(kù)，因此當(dāng)對(duì)其進(jìn)行修改時(shí)，Netlify 會(huì)立即注意到該修改并重新部署我們的站點(diǎn)。

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

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

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

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

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

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

要使用我們?cè)谏弦还?jié)中創(chuàng)建的表單(以演示如何將 Netlify 表單與有狀態(tài)的 React 表單一起使用)，我們首先必須將表單從無(wú)狀態(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è)事件偵聽(tīng)器：

// 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ù)式組件。