使用Formik轻松开发更高质量的React表单(二)使用指南
一个基本的例子
设想你要开发一个可以编辑用户数据的表单。不过,你的用户API端使用了具有类似下面的嵌套对象表达:
从网站建设到定制行业解决方案,为提供成都网站制作、网站建设、外贸网站建设服务体系,各种行业企业客户提供网站建设解决方案,助力业务快速发展。创新互联将不断加快创新步伐,提供优质的建站服务。
{
id: string,
email: string,
social: {
facebook: string,
twitter: string,
// ...
}
}
最后,我们想使开发的对话框表单能够接收下面几个属性(props):user,updateUser和onClose(显然,user是一个对象,updateUser和onClose却都是两个方法)。
// User.js
import React from 'react';
import Dialog from 'MySuperDialog';
import { Formik } from 'formik';
const EditUserDialog = ({ user, updateUser, onClose }) => {
return (
);
};
简化编码
为了简化表单组件的编码,Formik还提供了两个帮助API:
于是,下面的代码与前面一致,只是使用
和// EditUserDialog.js
import React from 'react';
import Dialog from 'MySuperDialog';
import { Formik, Field, Form } from 'formik';
const EditUserDialog = ({ user, updateUser, onClose }) => {
return (
);
};
React Native开发问题
Formik与React Native 和React Native Web开发完全兼容。然而,由于ReactDOM和React Native表单处理与文本输入方式的不同,有两个区别值得注意。本文将介绍这个问题并推荐更佳使用方式。
在进一步讨论前,先来最简要地概括一下如何在React Native中使用Formik。下面的轮廓代码展示了两者的关键区别:
// Formik +React Native示例
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { withFormik } from 'formik';
const enhancer = withFormik({
/*...*/
});
const MyReactNativeForm = props => (
);
export default enhancer(MyReactNativeForm);
从上面代码中,你会明显注意到在React Native 和React DOM开发中使用Formik存在如下不同:
(1)Formik的props.handleSubmit被传递给一个,而不是HTML
组件(因为在React Native中没有元素)。(2)
避免在render中创建新函数
如果因某种原因你想在每一个render中避免创建新函数,那么我建议你把React Native的
- 编写你自己的针对定制输入元素的类包装器;
- 传递定制组件的props.setFieldValue,而不是传递props.handleChange;
- 使用一个定制的change函数回调,它将调用你传递给setFieldValue的任何内容。
请参考下面的代码:
// FormikReactNativeTextInput.js
import * as React from 'react';
import { TextInput } from 'react-native';
export default class FormikReactNativeTextInput extends React.Component {
handleChange = (value: string) => {
// remember that onChangeText will be Formik's setFieldValue
this.props.onChangeText(this.props.name, value);
};
render() {
// we want to pass through all the props except for onChangeText
const { onChangeText, ...otherProps } = this.props;
return (
);
}
}
然后,你可以像下面这样使用这个定制输入组件:
// MyReactNativeForm.js
import { View, Button } from 'react-native';
import TextInput from './FormikReactNativeTextInput';
import { Formik } from 'formik';
const MyReactNativeForm = props => (
{
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
render={props => (
)}
/>
);
export default MyReactNativeForm;
使用TypeScript开发Formik表单
(一)TypeScript类型
Formik是使用TypeScript写的,Formik中的类型十分类似于React Router 4中的
Render props ( and )
import * as React from 'react';
import { Formik, FormikProps, Form, Field, FieldProps } from 'formik';
interface MyFormValues {
firstName: string;
}
export const MyApp: React.SFC<{} /* whatever */> = () => {
return (
My Example
alert(JSON.stringify(values))}
render={(formikBag: FormikProps) => (
)}
/>
);
};
(二)使用withFormik()
import React from 'react';
import * as Yup from 'yup';
import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';
// Shape of form values
interface FormValues {
email: string;
password: string;
}
interface OtherProps {
message: string;
}
顺便提醒一下,你可以使用InjectedFormikProps
const InnerForm = (props: OtherProps & FormikProps) => {
const { touched, errors, isSubmitting, message } = props;
return (
);
};
//MyForm接收的props的类型
interface MyFormProps {
initialEmail?: string;
message: string; // if this passed all the way through you might do this or make a union type
}
//使用withFormik高阶组件包装你的表单
const MyForm = withFormik({
// Transform outer props into form values
mapPropsToValues: props => {
return {
email: props.initialEmail || '',
password: '',
};
},
//添加定制的校验函数(也有可能是异步的)
validate: (values: FormValues) => {
let errors: FormikErrors = {};
if (!values.email) {
errors.email = 'Required';
} else if (!isValidEmail(values.email)) {
errors.email = 'Invalid email address';
}
return errors;
},
handleSubmit: values => {
// do submitting things
},
})(InnerForm);
// 你可以在任何地方使用
const Basic = () => (
My App
This can be anywhere in your application
);
export default Basic;
Formik表单提交原理
要在Formik中提交表单,你需要以某种方式触发 handleSubmit(e) 或者submitForm属性调用(在Formik中这两个方法都是以属性的方式提供的)。 当调用其中一个方法时,Formik每次都会执行下面的伪代码:
(一)预提交
(1)修改所有字段
(2)把isSubmitting 设置为true
(3)submitCount + 1
(二)校验
(1)把isValidating设置为true
(2)异步运行所有字段级的校验和validationSchema,并深度合并执行结果
(3)判断是否存在错误:
如果存在错误:取消提交,把isValidating设置为false,设置错误信息,并把isSubmitting设置为false
如果不存在错误:Set isValidating to false, proceed to "Submission"
(三)提交
最后继续运行你的提交函数吧(例如是onSubmit或者handleSubmit)。你可以通过在你的处理器函数中调用setSubmitting(false) 来结束生命周期。
FAQ
(1)Q:怎么判定提交处理器(submission handler)正在执行中?
A:当isValidating为false且isSubmitting为true时。
(2)Q:为什么在提交前Formik要“润色一下(touch)”表单中所有字段?
A:通常,当UI表单中输入字段被操作过后(Formik中称为“touched”)只显示与之相关的错误信息。于是,在提交一个表单前,Formik会touch一下所有字段,这样所有可能隐藏的错误都会变得可见。
(3)Q:如何避免两次重复提交?
A:办法是当isSubmitting为true时,禁止所有能够触发提交的调用。
(4)Q:如何得知表单在提交前正在校验中?
A:如果isValidating为true而且isSubmitting也为true的话,......
分享标题:使用Formik轻松开发更高质量的React表单(二)使用指南
浏览地址:http://scyanting.com/article/ghssdi.html