Formik

Formik是React官方推荐给我们用于增强React表单功能的第三方模块，有了Formik以后我们就可以更加专注的处理我们自己的业务逻辑，而不再分心处理表单技术上的细节。

Formik简介

Formik官方介绍说增强表单处理能力，简化表单处理流程。官⽹。

首先，我们通过npm安装一下

shell

npm install formik

然后使⽤ formik 进⾏表单数据绑定以及表单提交处理

jsx

import { useFormik } from 'formik';
function App(){
    const formik = useFormik({initialValues: { username: '张三' },onSubmit:values=>{}});
    return <form onSubmit={formik.handleSubmit}>
        <input type="text" name="username"
            value={formik.values.username}
            onChange={formik.handleChange}
        />
        <input type="submit"/>
    </form>
}

初始验证方式：

jsx

const formik = useFormik({
    validate: values=>{
        const errors = {};
        if(!values.username) errors.username= '请输入用户名';
        return errors; 
    }
});
return <form>{formik.errors.username?<div>{formik.erros.username}</div>:null}</form>

完善错误信息提示时的用户体验：

开启离开焦点时触发验证

onBlur={formik.handleBlur}

提示信息时检查表单元素的值是否被改动过

{formik.touched.username && formik.errors.username?<div>{formik.errors.username}</div>:null}

使用Yup进行表单验证：

首先安装yup

shell

npm install yup

引入yup

import * as Yup from 'yup';

然后定义验证规则

validationSchema: Yup.object({
    username: Yup.string()
        .max(15,'用户名的长度不能大于15')
        .required('请输入用户名'),
    passowrd: Yup.string()
        .max(20,'密码的长度不能大于20')
        .required('请输入密码')
})

减少样板代码，通过使用formik.getFieldProps方法来替代value、onChange和onBrlur。

jsx

<form onSubmit={formik.handleSubmit}>
    <input type="text" name="username"
        {...formik.getFieldProps('username')}
    />
    <input type="submit"/>
</form>

在Formik中提供了一系列的组件来帮助我们构建表单。它的好处是让我们表单的代码看起来更加整洁。

jsx

import {Formik,Form,Field,ErrorMessage} from 'formik';

function App(){
    return (
        <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={schema}
        >
            <Form>
                <Field name="username" />
                <ErrorMessage name="username"/>
                <button type="submit">提交</button>
            </Form>
        </Formik>
    )
}

默认情况下, Field组件渲染的是⽂本框. 如要⽣成其他表单元素可以使⽤以下语法

jsx

<Field name="content" as="textarea"/>
<Field name="content" as="textarea">
    <option value="前端">前端</option>
    <option value="Java">Java</option>
    <option value="python">python</option>
</Field>

使⽤ useField 构建⾃定义表单控件

jsx

import { useField } from "formik";
function MyInputField({label,...props}){
    const [field,meta] = useField(props)
    return <div>
        <label htmlFor={props.id}>{label}</label>
        <input {...field} {...props} />
        {meta.touched && meta.error ? <div>meta.error</div>: null}
    </div>
}
<MyInputField label="密码" type="password" name="password" placeholder="请输入密码" />

Formik ​

Formik简介 ​

博客

Formik

Formik简介