酒茶白开水
酒茶白开水

React七Formik

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)
            }
        })
        ……

useFormik 返回对象属性解释：

  • handleSubmit：提交处理程序
  • handleChange：每个 HTML 输入重用相同的更改处理函数；传递给每个、