Formilk

1、Formilk 简介

（1）介绍

        增强表单处理能力. 简化表单处理流程。

[ 官⽹](https://jaredpalmer.com/formik/)[ 官⽹ ](https://jaredpalmer.com/formik/)

[        官网 (https://jaredpalmer.com/formik/)

（2）下载

        npm install formik

        npm install yum //表单验证

2、Formilk 示例

import React from "react";
import { Formik, Form, Field, ErrorMessage, useField  } from "formik"
import * as Yup from "yup"


function MyInput ({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>
}

function Checkbox({label, ...props}) {
  const [filed, 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:"", content:"我是内容", subject:"Java", hobbies: ['足球', '篮球'],password:""};
    const handleSubmit = (values) => {
      console.log(values)
    };
    const schema = Yup.object({
      username: Yup.string()
        .max(15, "用户名的长度不能大于15")
        .required("请输入用户名"),
      password: Yup.string()
       .max(6, "密码的长度不能小于6")
        .required("请输入密码")
    });
 
   return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={schema}
    >
      <Form>
        <Field name="username"/>
        <ErrorMessage name="username"/>

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

         // 自定义组件
        <MyInput id="myPass" label="密码" type="password" name="password" placeholder="请输入密码" />


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

        <input type="submit"/>
      </Form>
    </Formik>
  )
}

export default App;