六大權益！華為8月服務日開啟：手機免費貼膜、維修免人工費
8月5日消息，一年一度的華為開發者大會2023（Together）日前在松山湖拉開帷幕，與此同時，華為8月服務日也式開啟，到店可享六大專屬權益。華為用戶可在華為商城Ap
大家好，今天給大家分享一個非常實用的 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
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號