大家好,今天給大家分享一個非常實用的 React 庫——formik。formik 是一個用于構建和管理 React 表單的庫。它的主要目的是簡化表單的開發流程,使得創建和處理表單變得更加容易。
formik 是一個非常流行的表單庫,因為它簡單易用,功能強大,而且可以與其他庫和框架很好地集成。如果你需要在 React 應用中創建和管理表單,那么使用 formik 可以讓你的工作變得更加輕松愉快。
使用 formik 需要先安裝它:
npm install formik
然后在你的代碼中引入 formik:
import { Formik } from 'formik';
接下來,你就可以使用 Formik 組件來創建一個表單:
<Formik initialValues={{ name: '', email: '', }} onSubmit={(values, actions) => { // 表單提交處理函數 }}> {(props) => ( <form onSubmit={props.handleSubmit}> {/* 表單字段 */} <button type="submit">提交</button> </form> )}</Formik>
在 Formik 組件內部,你需要編寫一個函數來渲染表單。這個函數會接收一個參數,包含了各種用于控制表單的屬性和方法。你可以使用這些屬性和方法來渲染表單的各個部分。
表單提交時,Formik 組件會調用 onSubmit 屬性指定的函數。這個函數會接收兩個參數:表單數據對象和表單操作對象。你可以使用這兩個參數來處理表單提交,例如將數據發送到服務器。
formik 提供了許多其他的屬性和方法來幫助你控制表單的各種狀態和功能。例如,你可以使用 handleChange 和 handleBlur 方法來監聽表單字段的輸入和失焦事件,使用 validateForm 方法來校驗表單數據的有效性,使用 setFieldValue 方法來更新表單字段的值,使用 setErrors 方法來設置表單字段的錯誤信息,使用 isSubmitting 屬性來檢測表單是否正在提交中,等等。
還有一些其他的重要的屬性和方法,例如:
通過使用這些屬性和方法,你可以構建出各種功能強大的表單。
最后,需要注意的是,formik 還提供了一些其他的組件,例如 Form、Field 和 ErrorMessage,可以幫助你更簡單地創建表單。你可以參考 formik 文檔,了解更多關于這些組件的細節。
你可以使用 Formik 創建自定義組件。要創建自定義組件,你需要使用 Formik 的 withFormik 高階組件。這個高階組件會給你一個 formik 對象,這個對象包含了 Formik 的所有屬性和方法。你可以使用這個對象來像使用受控組件一樣使用自定義組件。
例如,你可以使用以下代碼創建一個自定義輸入組件:
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;
在這個例子中,我們使用了 Formik 的 withFormik 高階組件來創建一個自定義輸入組件。我們通過在 Form 組件中使用 Field 組件來使用這個自定義組件。我們還指定了 handleSubmit 函數,這個函數會在表單提交時調用。
Formik 也提供了一些內置的驗證方法,你可以使用它們來驗證表單數據。例如,你可以使用以下代碼來驗證表單字段是否為必填項:
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> );};
此外,Formik 還提供了 setErrors 和 setFieldError 方法,你可以使用它們來在表單提交前設置錯誤信息。你可以使用以下代碼來在表單提交前設置錯誤信息:
import { useFormik } from 'formik';const MyForm = () => { const formik = useFormik({ initialValues: { email: '', }, onSubmit: values => { // 在這里進行表單提交處理 }, }); 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> );};
在這個例子中,我們使用了一個異步驗證函數 validateEmail 來模擬表單提交前的驗證。如果電子郵件地址已被使用,則會設置錯誤信息。
下面我們來通過 Formik 創建簡單登錄表單的實例,代碼如下:
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>
在這個例子中,我們創建了一個 Formik 組件,并提供了幾個 props:
我們還使用了 Field 組件來創建表單輸入,并使用 ErrorMessage 組件來顯示錯誤消息。
當用戶提交表單時,Formik 會調用 validate 函數并檢查表單值是否有效。如果表單值有效,則會調用 onSubmit 函數并提交表單。
最后我們來做下總結,Formik 是一個為 React 應用程序提供表單狀態管理的庫。它提供了一組簡單的、可擴展的組件和一組優秀的工具方法,可以大大簡化在 React 應用程序中使用表單的工作。
優點:
缺點:
使用 Formik 的注意事項:
關于如何使用 formik 創建 React 表單的介紹就到這里,希望今天的分享能夠幫助到你。
本文鏈接:http://www.www897cc.com/showinfo-26-34647-0.html如何使用 Formik 創建 React 表單
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com