1hX28資訊網——每日最新資訊28at.com
hi, 大家好,我是徐小夕, 今天又到了我們的博學時間。今天和大家分享一款非常有價值的開源項目——Formik。1hX28資訊網——每日最新資訊28at.com
這款開源項目也是我研究零代碼搭建平臺——H5-Dooring 時參考的項目之一,它可以提高表單渲染引擎的性能和效率,構建出性能更加優秀的表單設計器。下圖是 H5-Dooring 表單設計器的截圖:1hX28資訊網——每日最新資訊28at.com
1hX28資訊網——每日最新資訊28at.com
Formik 是什么
Formik 是一個流行的 React 表單庫。目前在 github 上已經有近 34k 的 star,已廣泛被各大公司使用,如:1hX28資訊網——每日最新資訊28at.com
- Airbnb:Formik 被用于 Airbnb 的一些項目中,包括其網站和移動應用程序。
- IBM Cloud:IBM Cloud 使用 Formik 來構建其云服務的用戶界面。
- NASA:NASA 使用 Formik 來創建一些項目的表單,例如其太空探索計劃的任務管理系統。
1hX28資訊網——每日最新資訊28at.com
Formik 簡化了 React 應用程序中表單的開發。它提供了一系列功能和特性,使創建、管理和驗證表單變得更加容易, 如:1hX28資訊網——每日最新資訊28at.com
- 易于使用的 API:Formik 提供了一個簡潔直觀的 API,讓你能夠快速定義和操作表單字段。
- 自動狀態管理:Formik 自動管理表單的狀態,包括輸入值、驗證錯誤等,使你無需手動處理這些狀態。
- 高效的驗證:Formik 內置了強大的驗證功能,可以輕松地定義字段驗證規則,并在用戶輸入時實時反饋錯誤信息。
- 可組合的表單字段:Formik 支持自定義表單字段組件,使你能夠靈活地創建復雜的表單布局。
- 與其他庫集成:Formik 可以與其他流行的庫和工具(如 Yup、React Hook Form)集成,提供更多的擴展性和靈活性。
接下來就大家一起來了解學習一下這個開源庫,如果想研究的也可以參考它的開源地址:1hX28資訊網——每日最新資訊28at.com
github: https://github.com/jaredpalmer/formik1hX28資訊網——每日最新資訊28at.com
使用介紹
1hX28資訊網——每日最新資訊28at.com
以下是使用 Formik 的基本步驟:1hX28資訊網——每日最新資訊28at.com
- 安裝依賴:首先,需要使用 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} />。
- 處理表單提交:使用 Formik 的 handleSubmit 函數來處理表單提交。可以在組件中添加以下代碼:<button type="submit" notallow={formik.handleSubmit}>提交</button>。
以上就是使用 Formik 的基本步驟,我們還可以根據自己的需求進一步配置和擴展 Formik 的功能。1hX28資訊網——每日最新資訊28at.com
代碼案例:1hX28資訊網——每日最新資訊28at.com
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 應用場景包括:1hX28資訊網——每日最新資訊28at.com
- 網頁表單:Formik 可以用于創建各種類型的網頁表單,包括用戶注冊、登錄、聯系方式、訂單提交等。
- 數據錄入:Formik 可以用于簡化數據錄入過程,提高數據的準確性和完整性。
- 后臺管理系統:Formik 可以用于構建后臺管理系統的表單界面,方便管理員對數據進行操作和管理。
核心組成
Formik 的核心實現原理是通過將表單的狀態和邏輯分離,使開發者能夠更輕松地管理和驗證表單數據。1hX28資訊網——每日最新資訊28at.com
Formik 提供了一組工具和組件,幫助開發者構建表單,并處理表單的提交、驗證和錯誤處理等功能。1hX28資訊網——每日最新資訊28at.com
1hX28資訊網——每日最新資訊28at.com
其核心組件包括:1hX28資訊網——每日最新資訊28at.com
- Formik 組件:管理表單狀態和邏輯的核心組件,它接受表單的初始值、驗證函數和提交函數,并提供了一系列工具方法來處理表單的狀態和邏輯。
- Field 組件:用于渲染表單字段的組件,它接受表單字段的名稱、類型和驗證規則等參數,并根據這些參數渲染相應的表單字段。
- ErrorMessage 組件:用于渲染表單驗證錯誤信息的組件,它接受表單字段的名稱和驗證錯誤信息等參數,并根據這些參數渲染相應的錯誤信息。
- Form 組件:用于包裹表單字段和提交按鈕的組件,它接受表單的提交函數等參數,并提供了一個提交按鈕來提交表單數據。
最后
后續我也會使用它實現表單引擎,并集成到我的開源項目 next-admin 中,供大家參考:1hX28資訊網——每日最新資訊28at.com
github: https://github.com/MrXujiang/next-admin。1hX28資訊網——每日最新資訊28at.com
本文鏈接:http://www.tebozhan.com/showinfo-26-84021-0.htmlFormik:讓用戶體驗更加出色的表單解決方案
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 對號入座,快看看你的應用系統用了哪些高并發技術?
下一篇: 用Go語言&&Redis實現分布式鎖,我還是第一次