如何使用 Formik 創(chuàng)建 React 表單
大家好，今天給大家分享一個(gè)非常實(shí)用的 React 庫(kù)——formik。formik 是一個(gè)用于構(gòu)建和管理 React 表單的庫(kù)。它的主要目的是簡(jiǎn)化表單的開(kāi)發(fā)流程，使得創(chuàng)建和處理表單變得更加容易。
1、什么是 formik，它提供了哪些功能
formik 是一個(gè)非常流行的表單庫(kù)，因?yàn)樗?jiǎn)單易用，功能強(qiáng)大，而且可以與其他庫(kù)和框架很好地集成。如果你需要在 React 應(yīng)用中創(chuàng)建和管理表單，那么使用 formik 可以讓你的工作變得更加輕松愉快。
- 簡(jiǎn)化表單數(shù)據(jù)的處理：formik 提供了一組簡(jiǎn)單易用的 API，可以幫助你維護(hù)表單數(shù)據(jù)和狀態(tài)。
- 校驗(yàn)表單數(shù)據(jù)：formik 內(nèi)置了一組強(qiáng)大的校驗(yàn)功能，可以幫助你確保表單數(shù)據(jù)的正確性。
- 提交表單數(shù)據(jù)：formik 可以幫助你處理表單提交，并提供了一組方法來(lái)讓你處理提交過(guò)程中的各種情況。
2、formik 的基本使用方法
使用 formik 需要先安裝它：
npm install formik然后在你的代碼中引入 formik：
import { Formik } from 'formik';接下來(lái)，你就可以使用 Formik 組件來(lái)創(chuàng)建一個(gè)表單：
<Formik
initialValues={{
name: '',
email: '',
}}
onSubmit={(values, actions) => {
// 表單提交處理函數(shù)
}}
>
{(props) => (
<form onSubmit={props.handleSubmit}>
{/* 表單字段 */}
<button type="submit">提交</button>
</form>
)}
</Formik>在 Formik 組件內(nèi)部，你需要編寫(xiě)一個(gè)函數(shù)來(lái)渲染表單。這個(gè)函數(shù)會(huì)接收一個(gè)參數(shù)，包含了各種用于控制表單的屬性和方法。你可以使用這些屬性和方法來(lái)渲染表單的各個(gè)部分。
表單提交時(shí)，F(xiàn)ormik 組件會(huì)調(diào)用 onSubmit 屬性指定的函數(shù)。這個(gè)函數(shù)會(huì)接收兩個(gè)參數(shù)：表單數(shù)據(jù)對(duì)象和表單操作對(duì)象。你可以使用這兩個(gè)參數(shù)來(lái)處理表單提交，例如將數(shù)據(jù)發(fā)送到服務(wù)器。
formik 提供了許多其他的屬性和方法來(lái)幫助你控制表單的各種狀態(tài)和功能。例如，你可以使用 handleChange 和 handleBlur 方法來(lái)監(jiān)聽(tīng)表單字段的輸入和失焦事件，使用 validateForm 方法來(lái)校驗(yàn)表單數(shù)據(jù)的有效性，使用 setFieldValue 方法來(lái)更新表單字段的值，使用 setErrors 方法來(lái)設(shè)置表單字段的錯(cuò)誤信息，使用 isSubmitting 屬性來(lái)檢測(cè)表單是否正在提交中，等等。
還有一些其他的重要的屬性和方法，例如：
- values：表單數(shù)據(jù)對(duì)象，包含了所有表單字段的值。
- errors：表單字段的錯(cuò)誤信息對(duì)象。
- touched：表單字段是否已經(jīng)被訪問(wèn)過(guò)的對(duì)象。
- handleReset：重置表單的方法。
通過(guò)使用這些屬性和方法，你可以構(gòu)建出各種功能強(qiáng)大的表單。
最后，需要注意的是，formik 還提供了一些其他的組件，例如 Form、Field 和 ErrorMessage，可以幫助你更簡(jiǎn)單地創(chuàng)建表單。你可以參考 formik 文檔，了解更多關(guān)于這些組件的細(xì)節(jié)。
3、關(guān)于 formik 的高級(jí)用法
你可以使用 Formik 創(chuàng)建自定義組件。要?jiǎng)?chuàng)建自定義組件，你需要使用 Formik 的 withFormik 高階組件。這個(gè)高階組件會(huì)給你一個(gè) formik 對(duì)象，這個(gè)對(duì)象包含了 Formik 的所有屬性和方法。你可以使用這個(gè)對(duì)象來(lái)像使用受控組件一樣使用自定義組件。
例如，你可以使用以下代碼創(chuàng)建一個(gè)自定義輸入組件：
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
}) => (
<div>
<input type="text" {...field} {...props} />
{touched[field.name] && errors[field.name] && <div className="error">{errors[field.name]}</div>}
</div>
);
const MyForm = ({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<Form>
<Field type="text" name="email" component={CustomInput} />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
);
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;在這個(gè)例子中，我們使用了 Formik 的 withFormik 高階組件來(lái)創(chuàng)建一個(gè)自定義輸入組件。我們通過(guò)在 Form 組件中使用 Field 組件來(lái)使用這個(gè)自定義組件。我們還指定了 handleSubmit 函數(shù)，這個(gè)函數(shù)會(huì)在表單提交時(shí)調(diào)用。
Formik 也提供了一些內(nèi)置的驗(yàn)證方法，你可以使用它們來(lái)驗(yàn)證表單數(shù)據(jù)。例如，你可以使用以下代碼來(lái)驗(yàn)證表單字段是否為必填項(xiàng)：
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 (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
<button type="submit">Submit</button>
</form>
);
};此外，F(xiàn)ormik 還提供了 setErrors 和 setFieldError 方法，你可以使用它們來(lái)在表單提交前設(shè)置錯(cuò)誤信息。你可以使用以下代碼來(lái)在表單提交前設(shè)置錯(cuò)誤信息：
import { useFormik } from 'formik';
const MyForm = () => {
const formik = useFormik({
initialValues: {
email: '',
},
onSubmit: values => {
// 在這里進(jìn)行表單提交處理
},
});
const validateEmail = email => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === 'test@example.com') {
formik.setFieldError('email', 'Email already in use');
reject();
} else {
resolve();
}
}, 1000);
});
};
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
<button type="submit" onClick={() => validateEmail(formik.values.email)}>
Submit
</button>
</form>
);
};在這個(gè)例子中，我們使用了一個(gè)異步驗(yàn)證函數(shù) validateEmail 來(lái)模擬表單提交前的驗(yàn)證。如果電子郵件地址已被使用，則會(huì)設(shè)置錯(cuò)誤信息。
4、一個(gè)登錄表單實(shí)例
下面我們來(lái)通過(guò) Formik 創(chuàng)建簡(jiǎn)單登錄表單的實(shí)例，代碼如下：
import { Formik, Form, Field, ErrorMessage } from 'formik';
<Formik
initialValues={{ email: '', password: '' }}
validate={values => {
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 }) => (
<Form>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>在這個(gè)例子中，我們創(chuàng)建了一個(gè) Formik 組件，并提供了幾個(gè) props：
- initialValues: 表單初始值。
- validate: 驗(yàn)證函數(shù)，在表單提交時(shí)調(diào)用。
- onSubmit: 提交表單時(shí)調(diào)用的函數(shù)。
我們還使用了 Field 組件來(lái)創(chuàng)建表單輸入，并使用 ErrorMessage 組件來(lái)顯示錯(cuò)誤消息。
當(dāng)用戶提交表單時(shí)，F(xiàn)ormik 會(huì)調(diào)用 validate 函數(shù)并檢查表單值是否有效。如果表單值有效，則會(huì)調(diào)用 onSubmit 函數(shù)并提交表單。
5、總結(jié)
最后我們來(lái)做下總結(jié)，F(xiàn)ormik 是一個(gè)為 React 應(yīng)用程序提供表單狀態(tài)管理的庫(kù)。它提供了一組簡(jiǎn)單的、可擴(kuò)展的組件和一組優(yōu)秀的工具方法，可以大大簡(jiǎn)化在 React 應(yīng)用程序中使用表單的工作。
優(yōu)點(diǎn)：
- 簡(jiǎn)化表單開(kāi)發(fā)流程。Formik 封裝了很多常見(jiàn)的表單功能，如輸入字段驗(yàn)證、提交處理等，使開(kāi)發(fā)者能夠?qū)Ｗ⒂趯?shí)現(xiàn)表單的業(yè)務(wù)邏輯。
- 減少代碼量。Formik 提供了一組簡(jiǎn)單的組件和方法，使開(kāi)發(fā)者無(wú)需編寫(xiě)大量的代碼就能實(shí)現(xiàn)常見(jiàn)的表單功能。
- 提供豐富的功能。Formik 提供了很多有用的功能，如自定義驗(yàn)證器、自定義提交處理器等，可以滿足各種復(fù)雜的表單需求。
缺點(diǎn)：
- 對(duì)于簡(jiǎn)單的表單，使用 Formik 可能會(huì)帶來(lái)一些額外的復(fù)雜度。
- Formik 依賴(lài)于 React 和 Yup（一個(gè)用于表單驗(yàn)證的庫(kù)），如果你的項(xiàng)目中已經(jīng)使用了其他的表單庫(kù)或驗(yàn)證庫(kù)，則可能需要進(jìn)行一些額外的集成工作。
使用 Formik 的注意事項(xiàng)：
- 請(qǐng)務(wù)必熟練掌握 Formik 的使用方法，以便能夠充分發(fā)揮 Formik 的優(yōu)勢(shì)。
- 盡量使用 Formik 組件和方法來(lái)實(shí)現(xiàn)表單功能，避免手動(dòng)維護(hù)表單狀態(tài)。 如果你需要在表單中使用自定義組件，請(qǐng)確保這些組件能夠與 Formik 的組件和方法配合使用。
- 如果你需要在表單中使用異步驗(yàn)證或提交，請(qǐng)注意使用 Formik 提供的異步方法來(lái)實(shí)現(xiàn)。
- 使用 Formik 時(shí)，請(qǐng)注意遵守 React 的性能優(yōu)化指南，以便能夠最大化應(yīng)用程序的性能。
關(guān)于如何使用 formik 創(chuàng)建 React 表單的介紹就到這里，希望今天的分享能夠幫助到你。
