Formik 学习笔记

Formik 学习笔记

文章出处： 拉 勾 大前端 高薪训练营

1. Formik

1.1 Formik 介绍

增强表单处理能力，简化表单处理流程
官网

1.2 Formik 下载

npm install formik

2. Formik 增强表单

2.1 Formik 基本使用

使用 formik 进行表单数据绑定以及表单提交处理

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

2.2 表单验证

2.2.1 初始验证方式

const formik = useFormik({
     
  validate: values => {
     
    const errors = {
     }
    if (!values.username) errors.username = '请输入用户名'
    return errors
  }
})

return <form>{
     formik.errors.username ? <div>{
     formik.errors.username}</div> : null}</form>

2.2.2 表单验证（二）

增加 onBlur 事件，显示时先判断 formik.touched.username 是否存在

<input
  type="text"
  name="username"
  value={
     formik.values.username}
  onChange={
     formik.handleChange}
  onBlur={
     formik.handlerBlur}
/>
<p>{
     formik.touched.username && formik.errors.username ? formik.errors.username : null}</p>

2.2.3 使用 yup 验证

1. 下载 yup

npm install yup

2. 引入 yup

import * as Yup from 'yup'

3. 定义验证规则

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

2.3 减少样板代码

{
     ...formik.getFieldProps('username')}

2.4 使用组件的方式构建表单

import {
      Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

export default function App () {
     

  const initialValues = {
     
    username: '张三',
    content: '我是内容',
    subject: 'java',
  }
  const handleSubmit = values => {
     
    console.log(values)
  }
  const schema = Yup.object({
     
    username: Yup.string().max(15, '用户名的长度不能大于15').required('请输入用户名')
  })
  return (
    <Formik
      initialValues={
     initialValues}
      onSubmit={
     handleSubmit}
      validationSchema={
     schema}
    >
      <Form>
        <Field name="username" />
        <ErrorMessage name="username" />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  )
}

2.5 构建其他表单项

默认情况下，Field 组件渲染的是文本框，如要生成其他表单元素可以使用以下语法

<Field as="textarea" name="content" />
<Field as="select" name="subject" >
  <option value="java">java</option>
  <option value="js">js</option>
</Field>

2.6 使用useField 构建自定义表单控件

function MyInputField ({
      label, ...props }) {
     
  const [field, meta] = useField(props)
  return <div>
    <label htmlFor={
     props.id}>{
     label}</label>
    <input {
     ...field} {
     ...props} />
    <span>{
      meta.touched && meta.error ? meta.error: null }</span>
  </div>
}

2.7 自定义复选框组件

function Checkbox ({
      label, ...props }) {
     
  const [field, meta, helper] = useField(props)
  const {
     value} = meta
  const {
      setValue } = helper
  const handleChange = () => {
     
    const set = new Set(value)
    if (set.has(props.value)) {
     
      set.delete(props.value)
    } else {
     
      set.add(props.value)
    }
    setValue([...set])
  }
  return <div>
    <label htmlFor="" >
      <input checked={
     value.includes(props.value)} type="checkbox" {
     ...props} onChange={
     handleChange} />{
     label}
    </label>
  </div>
}

<Checkbox value="足球" label="足球" name="hobbies" />
<Checkbox value="篮球" label="篮球" name="hobbies" />
<Checkbox value="橄榄球" label="橄榄球" name="hobbies" />

const initialValues = {
     
  hobbies: ['足球', '篮球']
}