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

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

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

Formik 是什么

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

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

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

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

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

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

使用介紹

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

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

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

以上就是使用 Formik 的基本步驟，我們還可以根據(jù)自己的需求進一步配置和擴展 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 應用場景包括：

• 網(wǎng)頁表單：Formik 可以用于創(chuàng)建各種類型的網(wǎng)頁表單，包括用戶注冊、登錄、聯(lián)系方式、訂單提交等。
• 數(shù)據(jù)錄入：Formik 可以用于簡化數(shù)據(jù)錄入過程，提高數(shù)據(jù)的準確性和完整性。
• 后臺管理系統(tǒng)：Formik 可以用于構(gòu)建后臺管理系統(tǒng)的表單界面，方便管理員對數(shù)據(jù)進行操作和管理。

核心組成

Formik 的核心實現(xiàn)原理是通過將表單的狀態(tài)和邏輯分離，使開發(fā)者能夠更輕松地管理和驗證表單數(shù)據(jù)。

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

其核心組件包括：

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

最后

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

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