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: ['足球', '篮球']
}