当前位置：首页 > news >正文

React七Formik

news 来源：原创 2025/9/15 3:40:50

Formik是一个专为React构建的开源表单库。它提供了一个易于使用的API来处理表单状态管理，表单验证以及表单提交。Formik支持React中的所有表单元素和事件，可以很好地与React生态系统中的其他库集成。同时，Formik还提供了一些高级功能，如支持异步验证、字段级别的验证、根据表单状态变化自动计算属性等。

Formik 基础

Formik的优势，相较于传统的表单处理方法，Formik具有以下优势：

状态管理: Formik自动地处理表单状态管理，无需手动编写大量的状态管理逻辑。
表单验证: Formik提供了易于使用的表单验证工具，可以快速实现表单验证逻辑。
表单提交: Formik可以方便地处理表单提交，包括异步表单提交和重试机制。
支持复杂表单: Formik支持处理包括多级嵌套、动态表单、数组表单等多种复杂表单。

Formik 安装和简单使用

1、Formik安装，使用npm或yarn安装Formik。在终端中，切换项目目录并运行此命令 npm install formik 或 yarn add formik。

2、表单数据绑定以及提交处理

useFormik HOOK 参数说明：

initialValues：传递定义的输入HTML元素的name属性相匹配的初始值
onSubmit：提交程序，已经默认阻止了默认行为

onSubmit 属性定义了一个回调函数，在表单提交时被调用。在回调函数中可以访问表单中所有输入框的值并执行提交操作，通过 setSubmitting 函数，可以设置表单的提交状态。在表单的渲染函数中通过 handleSubmit 属性来处理表单的提交，使用 isSubmitting（默认false）属性来禁用提交按钮，直到表单提交完成。

        const formik = useFormik({initialValues: {username: '',password: ''},onSubmit: (values, {setSubmitting}) => {// formik 已经默认帮我们阻止了默认执行console.log('values: ', values);setSubmitting(true)}})……<form onSubmit={formik.handleSubmit}><div><label htmlFor="username">用户名：</label><input id="username" type="text" name="username" value={formik.values.username} onChange={formik.handleChange}></input></div><div><label htmlFor="password">密码：</label><input id="password" type="password" name="password" value={formik.values.password} onChange={formik.handleChange}></input></div><button type="submit" disabled={formik.isSubmitting}>提交</button></form>

useFormik 返回对象属性解释：

handleSubmit：提交处理程序
handleChange：传递给每个<input>、<select>、或<textarea>的更改处理程序
values：表单的当前值，使用 name 访问对应的值
handleChange：每个 HTML 输入重用相同的更改处理函数
setValues和setFieldValue：setValues设置formik的values属性值，setFieldValue设置values的某一个属性值，二者写法不同，但是目的一样改变values的值。

如果没有 formik，那么就得一个个写change事件。

3、表单校验

Formik 不仅跟踪表单values，还跟踪其验证和错误消息。要使用 JS 添加验证，需指定一个自定义验证函数并将其传递给钩子 useFormik() 的参数 validate。如果存在错误，这个自定义验证函数应该生成一个匹配的error对象。

            validate: values => {const errors = {}if (!values.username) {errors.username = '请输入用户名'} else if (values.username.length < 6 || values.username.length > 16) {errors.username = '请输入6~16位的用户名'} else if (!/^\w{6,16}$/.test(values.username)) {errors.username = '请输入由字母、数字、下划线组成的用户名'}if (!values.password) {errors.password = '请输入密码'} else if (values.password.length < 6 || values.password.length > 16) {errors.password = '请输入6~16位的密码'} else if (!/^\w{6,16}$/.test(values.password)) {errors.password = '请输入由字母、数字、下划线组成的密码'}console.log('errors: ', errors);return errors}

默认情况下，Formik 将在每次击键（onChange）事件以及提交之前进行验证。传递 formik.handleBlur 给输入元素的 onBlur 属性，那么会在输入元素的失焦（onBlur）事件中进行验证：

    <input id="username" type="text" name="username" value={formik.values.username} onChange={formik.handleChange} onBlur={formik.handleBlur}></input>

校验确实实现了，但是如果希望在提交表单的时候再显示错误，需要怎么做呢？
Formik 会跟踪哪些字段已被访问过。它将这些信息存储在一个名为 touched 的对象中，这些值为boolean值。

        <p>{formik.touched.username && formik.errors.username ? formik.errors.username : ''}</p>

Formik 结合 Yup 进行表单验证

Yup是一个构建对象模式的JavaScript模式验证器，用于验证和解析数据。它提供了一种声明式方法来创建校验模式。

由于 Formik 作者/用户非常喜欢Yup，因此 Formik 有一个名为 Yup 的特殊配置道具validationSchema，它会自动将 Yup 的验证错误消息转换为一对象。

1、Yup 安装 npm install yup 或 yarn add yup

2、使用 Yup 校验表单：

Formik 结合 Yup 可以轻松实现表单验证 validationSchema={Yup.object({...})}，使用 validationSchema 和 Yup 搭配之后就不需要再使用validate配置了。
Yup 允许创建复杂的校验逻辑，如必填项、字符长度、正则表达式等。

            validationSchema: Yup.object({username: Yup.string().required('请输入用户名').min(6, '请输入6~16位的用户名').max(16, '请输入6~16位的用户名').matches(/^\w{6,16}$/, '请输入由字母、数字、下划线组成的用户名'), password: Yup.string().required('请输入密码').min(6, '请输入6~16位的密码').max(16, '请输入6~16位的密码').matches(/^\w{6,16}$/, '请输入由字母、数字、下划线组成的密码')})

Formik 组件

以上都是通过 useFormik 拿到控制formik表单的内容，但是这样不容易形成封装，也就是说无法进行实例传值。而Formik由于配备了React Context，因此Formik本身就可以管理所包裹的JSX。

formik完全遵守React的组件化原则，可以和其他库或自定义逻辑无缝集成：

formik支持构建和复用表单组件，通过<Formik />组件和Context API实现跨组件通信。
可以创建包装<Field />、ErrorMessage等的自定义组件，提高代码复用性和可维护性。

            <Formik initialValues={{username: '', password: ''}} // 设置初始化值onSubmit={(values, {setSubmitting}) => { // 提交表单执行的函数setTimeout(() => {console.log('values: ', values); setSubmitting(true)}, 2000);}}validationSchema={Yup.object({ // 设置表单校验的模式username: Yup.string().required('请输入用户名').min(6, '请输入6~16位的用户名').max(16, '请输入6~16位的用户名').matches(/^\w{6,16}$/, '请输入由字母、数字、下划线组成的用户名'), password: Yup.string().required('请输入密码').min(6, '请输入6~16位的密码').max(16, '请输入6~16位的密码').matches(/^\w{6,16}$/, '请输入由字母、数字、下划线组成的密码')})}>{({handleSubmit, values, touched, handleChange, handleBlur, errors, isSubmitting}) => {return <form onSubmit={handleSubmit}><div><label htmlFor="username1">用户名：</label>{/* <input id="username1" type="text" name="username" value={values.username} onChange={handleChange} onBlur={handleBlur}></input> */}<Field id='username1' name='username' type='text'></Field>{/* <p>{touched.username && errors.username ? errors.username : ''}</p> */}<ErrorMessage name="username"></ErrorMessage></div><div><label htmlFor="password1">密码：</label><input id="password1" type="password" name="password" value={values.password} onChange={handleChange}></input><p>{touched.password && errors.password ? errors.password : ''}</p></div><button type="submit" disabled={isSubmitting}>提交</button></form>}}</Formik>

常用组件

1、ErrorMessage 捕捉错误的容器，必传一个name属性。

    <ErrorMessage name="username"></ErrorMessage>

2、Field 将自动将输入连接到 Formik，默认渲染是input输入框，有以下几种方法渲染：

    function MyField({field, form}) {console.log('field: ', field);console.log('form: ', form);return <input {...field}></input>}……<Formik initialValues={{email: '', project: 2, phone: '', address: '1'}} // 设置初始化值onSubmit={(values) => { console.log('values: ', values); }} // 提交表单执行的函数validationSchema={Yup.object({ // 设置表单校验的模式phone: Yup.string().required('请输入电话号码').matches(/^1[0-9]{10}/, '请输入有效的电话号码')})}>{({handleSubmit}) => {return <form onSubmit={handleSubmit}>{/* 1、直接渲染 */}<Field type='email' name='email' placeholder='请输入电子邮箱'></Field> <br/>{/* 2、as 转化成其他节点 */}<Field as='select' name='project'><option value={1}>数学及应用数学</option><option value={2}>软件工程</option><option value={3}>国际贸易</option></Field> <br/>{/* 3、渲染 jsx */}<Field name='phone'>{({field, form, meta}) => {console.log('field: ', field);console.log('form: ', form);console.log('meta: ', meta);return <div><label htmlFor="phone">电话号码</label><input id="phone" type="text" placeholder="请输入电话号码" value={field.value.phone} {...field}></input><p>{ meta.touched && meta.error ? meta.error : ''}</p></div>}}</Field>{/* 4、以 component 组件形式渲染 */}<Field name='address' component={MyField}></Field> <br /><button type="submit">提交</button></form>}}</Formik>

数组和对象校验

Formik 支持嵌套对象和数组：

yup 对象校验使用 Yup.object({})
yup 数组校验使用 Yup.array().of()

        <FormikinitialValues={{social: {wechat: '', qq: ''}, frends: ['', '']}}onSubmit={(values, {setSubmitting}) => {console.log('values: ', values)setSubmitting(true)}} validationSchema={Yup.object({social: Yup.object({wechat: Yup.string().required('请输入微信'), qq: Yup.string().required('请输入QQ').matches(/^[\w]$/, '请输入有效的QQ')}),frends: Yup.array().of(Yup.string().required('请输入你的朋友'))})}>{({values, handleChange, handleBlur, touched, errors, isSubmitting, setValues, setFieldValue}) => {console.log('object array values: ', values);console.log('object array handleChange: ', handleChange);console.log('object array handleBlur: ', handleBlur);console.log('object array touched: ', touched);console.log('object array errors: ', errors);console.log('object array setValues: ', setValues);console.log('object array setFieldValue: ', setFieldValue);return <form><h4>社交账号</h4><label>微信：</label><input name="social.wechat" value={values.social.wechat} onChange={handleChange} onBlur={handleBlur}></input><p>{ touched.social && errors.social && touched.social.wechat && errors.social.wechat ? errors.social.wechat : ''}</p><br /><label>QQ：</label><input name="social.qq" value={values.social.qq} onChange={handleChange} onBlur={handleBlur}></input><h4>朋友</h4>{values.frends.map((v, i) => {return (<div key={i}><input name={`friends[${i}]`} onChange={handleChange} onBlur={handleBlur}></input>{i < values.frends.length && <br />}</div>)})}<button type="submit" disabled={isSubmitting}>提交</button></form>}}</Formik>