hi, 大家好，我是徐小夕， 今天又到了我們的博學時間。今天和大家分享一款非常有價值的開源項目——Formik。

這款開源項目也是我研究零代碼搭建平臺——H5-Dooring 時參考的項目之一，它可以提高表單渲染引擎的性能和效率，構建出性能更加優秀的表單設計器。下圖是 H5-Dooring 表單設計器的截圖：

接下來我就和大家一起聊聊Formik 能做什么。

Formik 是什么

Formik 是一個流行的 React 表單庫。目前在 github 上已經有近 34k 的 star，已廣泛被各大公司使用，如：

• Airbnb：Formik 被用于 Airbnb 的一些項目中，包括其網站和移動應用程序。
• IBM Cloud：IBM Cloud 使用 Formik 來構建其云服務的用戶界面。
• NASA：NASA 使用 Formik 來創建一些項目的表單，例如其太空探索計劃的任務管理系統。

Formik 簡化了 React 應用程序中表單的開發。它提供了一系列功能和特性，使創建、管理和驗證表單變得更加容易, 如：

• 易于使用的 API：Formik 提供了一個簡潔直觀的 API，讓你能夠快速定義和操作表單字段。
• 自動狀態管理：Formik 自動管理表單的狀態，包括輸入值、驗證錯誤等，使你無需手動處理這些狀態。
• 高效的驗證：Formik 內置了強大的驗證功能，可以輕松地定義字段驗證規則，并在用戶輸入時實時反饋錯誤信息。
• 可組合的表單字段：Formik 支持自定義表單字段組件，使你能夠靈活地創建復雜的表單布局。
• 與其他庫集成：Formik 可以與其他流行的庫和工具（如 Yup、React Hook Form）集成，提供更多的擴展性和靈活性。

接下來就大家一起來了解學習一下這個開源庫，如果想研究的也可以參考它的開源地址：

github: https://github.com/jaredpalmer/formik

使用介紹

以下是使用 Formik 的基本步驟：

• 安裝依賴：首先，需要使用 yarn 包管理器安裝 Formik。可以在終端中運行以下命令：yarn add formik。
• 引入 Formik：在需要使用 Formik 的組件中，引入 Formik 組件。可以在組件的進口部分添加以下代碼：import {Formik} from 'formik';。
• 創建 Formik 實例：在組件中創建一個新的 Formik 實例。可以使用以下代碼：const formik = useFormik();。
• 配置表單字段：使用 Formik 的 Field 組件來定義表單字段。可以在組件中添加以下代碼：<Formik.Field name="username" type="text" />。
• 設置驗證規則：使用 Formik 的 validate 屬性來設置驗證規則。可以在組件中添加以下代碼：<Formik.Field name="username" type="text" validate={value => value.length > 3} />。

1. 處理表單提交：使用 Formik 的 handleSubmit 函數來處理表單提交。可以在組件中添加以下代碼：<button type="submit" notallow={formik.handleSubmit}>提交</button>。

以上就是使用 Formik 的基本步驟，我們還可以根據自己的需求進一步配置和擴展 Formik 的功能。

代碼案例：

import React from 'react';
import { Formik, Form, Field } from 'formik';

export const NestedExample = () => (
  <div>
    <h1>Social Profiles</h1>
    <Formik
      initialValues={{
        social: {
          facebook: '',
          twitter: '',
        },
      }}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      <Form>
        <Field name="social.facebook" />
        <Field name="social.twitter" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

應用場景

Formik 應用場景包括：

• 網頁表單：Formik 可以用于創建各種類型的網頁表單，包括用戶注冊、登錄、聯系方式、訂單提交等。
• 數據錄入：Formik 可以用于簡化數據錄入過程，提高數據的準確性和完整性。
• 后臺管理系統：Formik 可以用于構建后臺管理系統的表單界面，方便管理員對數據進行操作和管理。

核心組成

Formik 的核心實現原理是通過將表單的狀態和邏輯分離，使開發者能夠更輕松地管理和驗證表單數據。

Formik 提供了一組工具和組件，幫助開發者構建表單，并處理表單的提交、驗證和錯誤處理等功能。

其核心組件包括：

• Formik 組件：管理表單狀態和邏輯的核心組件，它接受表單的初始值、驗證函數和提交函數，并提供了一系列工具方法來處理表單的狀態和邏輯。
• Field 組件：用于渲染表單字段的組件，它接受表單字段的名稱、類型和驗證規則等參數，并根據這些參數渲染相應的表單字段。
• ErrorMessage 組件：用于渲染表單驗證錯誤信息的組件，它接受表單字段的名稱和驗證錯誤信息等參數，并根據這些參數渲染相應的錯誤信息。
• Form 組件：用于包裹表單字段和提交按鈕的組件，它接受表單的提交函數等參數，并提供了一個提交按鈕來提交表單數據。

最后

后續我也會使用它實現表單引擎，并集成到我的開源項目 next-admin 中，供大家參考：

github: https://github.com/MrXujiang/next-admin。