React -- Formik

Fomik 简介

Formik 介绍

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

Formik 下载

• npm install formik

Formik 增强表单

Formik 基本使用

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

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

表单验证

• 初始验证方式

  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>
  

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

  • 开启离开焦点时触发验证

    onBlur={formik.handleBlur}
    

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

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

表单验证 Yup

下载使用

npm install yup
import * as Yup from 'yup'

使用yap验证 – 定义验证规则

 validationSchema: Yup.object({
      username: Yup.string()
        .max(15, '用户名的长度不能大于15')
        .required('用户名不能为空')
    })

getFieldProps 方法

• 减少样板代码

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

使用组件构建表单

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

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

Field 组件的 as 属性

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

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

构建自定义表单控件

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

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

• 自定义表单控件 Checkbox

  import React from "react";
  import { Formik, Form, Field, ErrorMessage, useField } from "formik";
  import * as Yup from "yup";
  
  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>
  }
  
  function App() {
    const initialValues = {username: '', hobbies: ['足球', '篮球']};
    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" />
          <Checkbox value="足球" label="足球" name="hobbies"/>
          <Checkbox value="篮球" label="篮球" name="hobbies"/>
          <Checkbox value="橄榄球" label="橄榄球" name="hobbies"/>
          <input type="submit"/>
        </Form>
      </Formik>
    );
  }
  
  export default App;