建站
咨詢
售后
建站咨詢
新聞中心
大家好，今天給大家分享一個非常實用的 React 庫——formik。formik 是一個用于構(gòu)建和管理 React 表單的庫。它的主要目的是簡化表單的開發(fā)流程，使得創(chuàng)建和處理表單變得更加容易。
成都創(chuàng)新互聯(lián)專業(yè)提供服務(wù)器機柜租用服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買服務(wù)器機柜租用服務(wù)，并享受7*24小時金牌售后服務(wù)。
1、什么是 formik，它提供了哪些功能
formik 是一個非常流行的表單庫，因為它簡單易用，功能強大，而且可以與其他庫和框架很好地集成。如果你需要在 React 應(yīng)用中創(chuàng)建和管理表單，那么使用 formik 可以讓你的工作變得更加輕松愉快。
- 簡化表單數(shù)據(jù)的處理：formik 提供了一組簡單易用的 API，可以幫助你維護表單數(shù)據(jù)和狀態(tài)。
- 校驗表單數(shù)據(jù)：formik 內(nèi)置了一組強大的校驗功能，可以幫助你確保表單數(shù)據(jù)的正確性。
- 提交表單數(shù)據(jù)：formik 可以幫助你處理表單提交，并提供了一組方法來讓你處理提交過程中的各種情況。
2、formik 的基本使用方法
使用 formik 需要先安裝它：
npm install formik然后在你的代碼中引入 formik：
import { Formik } from 'formik';接下來，你就可以使用 Formik 組件來創(chuàng)建一個表單：
{
// 表單提交處理函數(shù)
}}
>
{(props) => (
)}
在 Formik 組件內(nèi)部，你需要編寫一個函數(shù)來渲染表單。這個函數(shù)會接收一個參數(shù)，包含了各種用于控制表單的屬性和方法。你可以使用這些屬性和方法來渲染表單的各個部分。
表單提交時，F(xiàn)ormik 組件會調(diào)用 onSubmit 屬性指定的函數(shù)。這個函數(shù)會接收兩個參數(shù)：表單數(shù)據(jù)對象和表單操作對象。你可以使用這兩個參數(shù)來處理表單提交，例如將數(shù)據(jù)發(fā)送到服務(wù)器。
formik 提供了許多其他的屬性和方法來幫助你控制表單的各種狀態(tài)和功能。例如，你可以使用 handleChange 和 handleBlur 方法來監(jiān)聽表單字段的輸入和失焦事件，使用 validateForm 方法來校驗表單數(shù)據(jù)的有效性，使用 setFieldValue 方法來更新表單字段的值，使用 setErrors 方法來設(shè)置表單字段的錯誤信息，使用 isSubmitting 屬性來檢測表單是否正在提交中，等等。
還有一些其他的重要的屬性和方法，例如：
- values：表單數(shù)據(jù)對象，包含了所有表單字段的值。
- errors：表單字段的錯誤信息對象。
- touched：表單字段是否已經(jīng)被訪問過的對象。
- handleReset：重置表單的方法。
通過使用這些屬性和方法，你可以構(gòu)建出各種功能強大的表單。
最后，需要注意的是，formik 還提供了一些其他的組件，例如 Form、Field 和 ErrorMessage，可以幫助你更簡單地創(chuàng)建表單。你可以參考 formik 文檔，了解更多關(guān)于這些組件的細節(jié)。
3、關(guān)于 formik 的高級用法
你可以使用 Formik 創(chuàng)建自定義組件。要創(chuàng)建自定義組件，你需要使用 Formik 的 withFormik 高階組件。這個高階組件會給你一個 formik 對象，這個對象包含了 Formik 的所有屬性和方法。你可以使用這個對象來像使用受控組件一樣使用自定義組件。
例如，你可以使用以下代碼創(chuàng)建一個自定義輸入組件：
import React from 'react';
import { withFormik, Form, Field } from 'formik';
const CustomInput = ({
field, // { name, value, onChange, onBlur }
form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
...props
}) => (
{touched[field.name] && errors[field.name] && {errors[field.name]}}
);
const MyForm = ({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
);
const FormikApp = withFormik({
mapPropsToValues: () => ({ email: '' }),
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 1000);
},
validationSchema: Yup.object().shape({
email: Yup.string()
.email()
.required('Required'),
}),
})(MyForm);
export default FormikApp;在這個例子中，我們使用了 Formik 的 withFormik 高階組件來創(chuàng)建一個自定義輸入組件。我們通過在 Form 組件中使用 Field 組件來使用這個自定義組件。我們還指定了 handleSubmit 函數(shù)，這個函數(shù)會在表單提交時調(diào)用。
Formik 也提供了一些內(nèi)置的驗證方法，你可以使用它們來驗證表單數(shù)據(jù)。例如，你可以使用以下代碼來驗證表單字段是否為必填項：
import { useFormik } from 'formik';
const MyForm = () => {
const formik = useFormik({
initialValues: {
email: '',
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
validate: values => {
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address';
}
return errors;
},
});
return (
);
};此外，F(xiàn)ormik 還提供了 setErrors 和 setFieldError 方法，你可以使用它們來在表單提交前設(shè)置錯誤信息。你可以使用以下代碼來在表單提交前設(shè)置錯誤信息：
import { useFormik } from 'formik';
const MyForm = () => {
const formik = useFormik({
initialValues: {
email: '',
},
onSubmit: values => {
// 在這里進行表單提交處理
},
});
const validateEmail = email => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]') {
formik.setFieldError('email', 'Email already in use');
reject();
} else {
resolve();
}
}, 1000);
});
};
return (
);
};在這個例子中，我們使用了一個異步驗證函數(shù) validateEmail 來模擬表單提交前的驗證。如果電子郵件地址已被使用，則會設(shè)置錯誤信息。
4、一個登錄表單實例
下面我們來通過 Formik 創(chuàng)建簡單登錄表單的實例，代碼如下：
import { Formik, Form, Field, ErrorMessage } from 'formik';
{
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
)}
在這個例子中，我們創(chuàng)建了一個 Formik 組件，并提供了幾個 props：
- initialValues: 表單初始值。
- validate: 驗證函數(shù)，在表單提交時調(diào)用。
- onSubmit: 提交表單時調(diào)用的函數(shù)。
我們還使用了 Field 組件來創(chuàng)建表單輸入，并使用 ErrorMessage 組件來顯示錯誤消息。
當用戶提交表單時，F(xiàn)ormik 會調(diào)用 validate 函數(shù)并檢查表單值是否有效。如果表單值有效，則會調(diào)用 onSubmit 函數(shù)并提交表單。
5、總結(jié)
最后我們來做下總結(jié)，F(xiàn)ormik 是一個為 React 應(yīng)用程序提供表單狀態(tài)管理的庫。它提供了一組簡單的、可擴展的組件和一組優(yōu)秀的工具方法，可以大大簡化在 React 應(yīng)用程序中使用表單的工作。
優(yōu)點：
- 簡化表單開發(fā)流程。Formik 封裝了很多常見的表單功能，如輸入字段驗證、提交處理等，使開發(fā)者能夠?qū)Ｗ⒂趯崿F(xiàn)表單的業(yè)務(wù)邏輯。
- 減少代碼量。Formik 提供了一組簡單的組件和方法，使開發(fā)者無需編寫大量的代碼就能實現(xiàn)常見的表單功能。
- 提供豐富的功能。Formik 提供了很多有用的功能，如自定義驗證器、自定義提交處理器等，可以滿足各種復(fù)雜的表單需求。
缺點：
- 對于簡單的表單，使用 Formik 可能會帶來一些額外的復(fù)雜度。
- Formik 依賴于 React 和 Yup（一個用于表單驗證的庫），如果你的項目中已經(jīng)使用了其他的表單庫或驗證庫，則可能需要進行一些額外的集成工作。
使用 Formik 的注意事項：
- 請務(wù)必熟練掌握 Formik 的使用方法，以便能夠充分發(fā)揮 Formik 的優(yōu)勢。
- 盡量使用 Formik 組件和方法來實現(xiàn)表單功能，避免手動維護表單狀態(tài)。 如果你需要在表單中使用自定義組件，請確保這些組件能夠與 Formik 的組件和方法配合使用。
- 如果你需要在表單中使用異步驗證或提交，請注意使用 Formik 提供的異步方法來實現(xiàn)。
- 使用 Formik 時，請注意遵守 React 的性能優(yōu)化指南，以便能夠最大化應(yīng)用程序的性能。
關(guān)于如何使用 formik 創(chuàng)建 React 表單的介紹就到這里，希望今天的分享能夠幫助到你。
分享名稱：如何使用Formik創(chuàng)建React表單
當前路徑：http://fisionsoft.com.cn/article/ccdpdge.html
