数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会学
时装设计
法律使用 Formik 处理 React.js 中的表单
Formik 的目的是消除 react 中表单处理的复杂性，简化表单提交。
Formik 使用 yup 来验证表单域，使用起来非常简单
首先安装 formik 库
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 字段，如果为空则显示错误消息。
请注意从 formik 导入的组件→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}
/>
更新于：2019 年 9 月 4 日
301 次浏览
广告