Formik 是 React 和 React Native 开源表单库，Formik 负责处理重复且烦人的事情——跟踪值/错误/访问的字段、编排验证和处理提交——所以您不必这样做。而简化字段校验的话我们可以使用yup工具来实现。
首先安装Formik 和 Yup
npm i formik
npm i yup
Formik 与 React Native 简单实例
首先我们先实现一个简单的实例，体验一下Formik框架的使用过程。
export default function FormikCheck() {
return (
<View style={
styles.container}>
<Text style={
styles.mainTitle}>表单校验</Text>
<Formik
initialValues={
{
email: "" }}
onSubmit={
(values) => console.log(values)}
>
{
/* 渲染属性 */}
{
({
handleChange, handleBlur, handleSubmit, values }) => (
<View>
<TextInput
style={
styles.inputItem}
onChangeText={
handleChange("email")}
onBlur={
handleBlur("email")}
value={
values.email}
/>
<Button onPress={
() => handleSubmit()} title="提交表单" />
</View>
)}
</Formik>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
mainTitle: {
fontSize: 20,
paddingBottom: 10,
borderBottomWidth: 1,
borderBottomColor: "#e3e3e3",
marginBottom: 10,
},
inputItem: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: "#e3e3e3",
marginBottom: 10,
},
});
Formik 常用属性和方法说明
通过上述的例子可以看到，我们使用的是Formik框架中的Formik组件来包裹表单元素从而进行表单的是有相关操作。
Formik组件每个渲染方法常用的属性有如下几个：
| 属性 | 类型 | 说明 |
|---|---|---|
| errors | { [field: string]: string } | 表单错误信息，所有表单对应的字段校验错误信息都在这个对象中 |
| handleReset | () => void | 重置处理程序。将表单重置为其初始状态 |
| handleSubmit | (e: React.FormEvent) => void | 提交处理程序 |
Formik组件常用的方法和属性有如下几个：
| 方法 / 属性 | 参数 | 说明 |
|---|---|---|
| initialValues | Values | 表单的初始字段值 |
| validationSchema | Schema 或者 (() => Schema) | Yup 模式或返回 Yup 模式的函数。这用于验证。错误通过键映射到内部组件的错误。它的键应该与值的键匹配。 |
| onReset | (values: Values, formikBag: FormikBag) => void | 表单重置处理程序 |
| onSubmit | (values: Values, formikBag: FormikBag) => void Promise | 表单提交处理程序 |
Formik 与 yup 一起使用进行表单校验
Formik框架只是为我们简化表单的操作，当出现表单字段特别多的时候，我们一个一个字段进行表单字段值的校验这很麻烦，所以我们可以使用yup工具来帮我们简化校验流程。具体实例如下：
const userSchema = Yup.object().shape({
email: Yup.string().email("Invalid email address"),
});
export default function FormikCheck() {
return (
<View style={
styles.container}>
<Text style={
styles.mainTitle}>表单校验</Text>
<Formik
initialValues={
{
email: "" }}
onSubmit={
(values) => console.log(values)}
validationSchema={
userSchema}
>
{
/* 渲染参数 */}
{
({
handleChange,
errors,
handleSubmit,
values,
dirty,
handleReset,
}) => (
<View>
<TextInput
style={
styles.inputItem}
onChangeText={
handleChange("email")}
value={
values.email}
/>
{
errors.email ? <Text>{
errors.email}</Text> : ""}
<Button
onPress={
() => {
console.log(dirty);
handleSubmit();
}}
title="提交表单"
/>
<Button onPress={
() => handleReset()} title="重置" />
</View>
)}
</Formik>
</View>
);
}