Formik 用于 React.js 中的表单处理
react jsjavascript libraryfront end technology更新于 2025/11/7 0:12:17
Formic 的目的是消除 React 中表单处理的复杂性，并使表单提交更简单。
Formic 使用 yup 来验证表单字段，使用起来非常简单
首先安装 formic 库
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
我们可以使用 yup，它对 formik 库有良好的支持
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}
/>
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
