Formik 介绍 

增强表单处理能⼒. 简化表单处理流程. [官⽹] https://jaredpalmer.com/formik/

安装

npm install formik

Formik使用

Formik 基本使⽤ 

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

import { useFormik } from 'formik';

function App() {
  const formik = useFormik({
    initialValues: { username: '小飞侠' },
    onSubmit: vals => {}
  })
  return (
    <form onSubmit={formik.handleSubmit}>
      <input type="text" name="username" value={formik.values.username} onChange={formik.handleChange} />
      <input type="submit" />
    </form>
  )
}

Formik 表单验证

初始验证⽅式

import { useFormik } from 'formik';

function App() {
  const formik = useFormik({
    initialValues: { username: '小飞侠' },
    validate: vals => {
      const errors = {};
      if (!vals.username) {
        errors.username = '请输入用户名';
      }
      // eles ....
      return errors;
    },
    onSubmit: vals => {
      console.log(vals)
    }
  })
  return (
    <form onSubmit={formik.handleSubmit}>
      <p>
      { formik.touched.username && formik.errors.username ? formik.errors.username : null }
      </p>
      <input type="text" name="username" 
      value={formik.values.username} 
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
       />
      }
      <input type="submit" />
    </form>
  )
}

yup验证插件

• npm install yup

• import * as Yup from 'yup'

• 注释 validate自定义验证

• 新增 validationSchema 并和 Yup对象关联
  

import { useFormik } from 'formik';

function App() {
  const formik = useFormik({
    initialValues: { username: '小飞侠' },
    // validate: vals => {
    //   const errors = {};
    //   if (!vals.username) {
    //     errors.username = '请输入用户名';
    //   }
    //   // eles ....
    //   return errors;
    // },
    validationSchema: Yup.object({
      username: Yup.string()
      .max(15, "用户名长度不能大于15")
      .required("请填写用户名"),
      password: Yup.string().min(6, "密码的长度不能小于6").required("请填写密码")

    })
    onSubmit: vals => {
      console.log(vals)
    }
  })
  return (
    <form onSubmit={formik.handleSubmit}>
      <p>
      { formik.touched.username && formik.errors.username ? formik.errors.username : null }
      </p>
      <input type="text" name="username" 
      value={formik.values.username} 
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
       />

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

      }
      <input type="submit" />
    </form>
  )
}

getFieldProps ⽅法

getFieldProps ⽅法用于优化表单项

      value={formik.values.password} 
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}

变成 ==>

import { useFormik } from 'formik';

function App() {
  const formik = useFormik({
    initialValues: { username: '小飞侠' },

    validationSchema: Yup.object({
      username: Yup.string()
      .max(15, "用户名长度不能大于15")
      .required("请填写用户名"),
      password: Yup.string().min(6, "密码的长度不能小于6").required("请填写密码")

    })
    onSubmit: vals => {
      console.log(vals)
    }
  })
  return (
    <form onSubmit={formik.handleSubmit}>
      <p>
      { formik.touched.username && formik.errors.username ? formik.errors.username : null }
      </p>
      <input type="text" name="username" 
      {...formik.getFieldProps('username')}
       />
      }

      <p>
      { formik.touched.password && formik.errors.password ? formik.errors.password : null }
      </p>
      <input type="text" name="password" 
      {...formik.getFieldProps('username')}
       />

      }
      <input type="submit" />
    </form>
  )
}

Formik 增强表单

使⽤组件的⽅式构建表单 

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

function App() {
  const initialValues = { username: '' };
  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>
  )
}

Field组件as属性

Field组件as可以构建其他表单组件比如 select textarea ...

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

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 as="textarea" name="content" />
        <Field as="select" name="subject">
          <option value="前端">前端</option>
          <option value="Java">Java</option>
        </Field>
        <Field name="username" />
        <ErrorMessage name="username" />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  )
}

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

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

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

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

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("请输入用户名")
    password: Yup.string().min(6, '密码长度不能小于6').required("请输入密码")
  })
  return(
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={schema}
    />
      <Form>
        <MyInput id="mypassword" label="密码" name="password" type="password" />
        <Field name="username" />
        <ErrorMessage name="username" />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  )
}

自定义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;

以上就是react+formik构建表单全部内容,感谢大家支持自学php网。