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

2026-06-04 1 花语

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

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组件上添加验证模式以使其工作。