用于React.js中表单处理的Formik

甲酸的目的是消除反应中表单处理的复杂性并使表单提交更简单。

Formic使用yup来验证表单字段，这很容易使用

首先安装甲酸库

npm install –save formic

示例

import React, { Component} from 'react';
import { Formik, FormikProps, Form, Field, ErrorMessage } from 'formik';
export class FormExample extends Component {
   handleSubmit = (values, {
      props = this.props,
      setSubmitting
   }) => {
      setSubmitting(false);
      return;
   }  
   render() {
      return(
         <Formik
            initialValues={{
               first_name: '',
               last_name: ''
            }}
            validate={(values) => {
               let errors = {};  
               if(!values.first_name)
               errors.first_name = "first name Required";
               //check if my values have errors
               return errors;
            }
         }
         onSubmit={this.handleSubmit}
         render={formProps => {
            return(
               <Form>
                  <Field type="text" name="first_name" placeholder="First Name"/>
                  <ErrorMessage name="first_name" />
                  <Field type="text" name="last_name" placeholder="Last Name" />
                  <ErrorMessage name="last_name" />
                  <button type="submit" disabled={formProps.isSubmitting}>
                     Submit Form
                  </button>
               </Form>
            );
         }}
      />);
   }
}

该代码很容易解释。我们有两个字段first_name和last_name。我们正在验证first_name字段并显示错误消息（如果为空）。

注意从formic→Formik，FormikProps，Form，Field，ErrorMessage导入的组件

我们可以使用对formik库有很好支持的yup

const validationSchema = Yup.object({
   first_name: Yup.string("Enter a First Name")
   .required("First Name is required"),
   last_name: Yup.string("Enter your Last Name")
   .last_name("Enter a valid Last Name")
   .required("Last Name is required")
})

我们可以像上面一样使用yup进行验证，并在formik组件上添加验证模式以使其工作。

<Formik
   initialValues={values}
validationSchema={validationSchema}
/>