用于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}
/>