hi, 大家好，我是徐小夕， 今天又到了我們的博學(xué)時(shí)間。今天和大家分享一款非常有價(jià)值的開源項(xiàng)目——Formik。

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

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

Formik 是什么

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

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

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

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

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

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

使用介紹

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

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

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

以上就是使用 Formik 的基本步驟，我們還可以根據(jù)自己的需求進(jìn)一步配置和擴(kuò)展 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>
);

應(yīng)用場景

Formik 應(yīng)用場景包括：

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

核心組成

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

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

其核心組件包括：

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

最后

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

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