一个基本的例子

设想你要开发一个可以编辑用户数据的表单。不过，你的用户API端使用了具有类似下面的嵌套对象表达：

{   id: string,   email: string,   social: {     facebook: string,     twitter: string,     // ...   }}

最后，我们想使开发的对话框表单能够接收下面几个属性（props）：user，updateUser和onClose（显然，user是一个对象，updateUser和onClose却都是两个方法）。

// User.jsimport React from 'react';import Dialog from 'MySuperDialog';import { Formik } from 'formik';const EditUserDialog = ({ user, updateUser, onClose }) => {  return (    
          
     Edit User
      
     
       {          CallMyApi(user.id, values).then(            updatedUser => {              actions.setSubmitting(false);              updateUser(updatedUser), onClose();            },            error => {              actions.setSubmitting(false);              actions.setErrors(transformMyAPIErrorToAnObject(error));            }          );        }}        render={({          values,          errors,          touched,          handleBlur,          handleChange,          handleSubmit,          isSubmitting,        }) => (          
                  
                   {errors.email && touched.email && 
       
        {errors.email}
       
}            
                   {errors.social &&              errors.social.facebook &&              touched.facebook && 
       
        {errors.social.facebook}
       
}            
                   {errors.social &&              errors.social.twitter &&              touched.twitter && 
       
        {errors.social.twitter}
       
}            
                 
      
        )}      />    
     
      );};

简化编码

为了简化表单组件的编码，Formik还提供了两个帮助API：

<Field>

<Form />

于是，下面的代码与前面一致，只是使用<Form />和<Field />这两个API进行了改写：

// EditUserDialog.jsimport React from 'react';import Dialog from 'MySuperDialog';import { Formik, Field, Form } from 'formik';const EditUserDialog = ({ user, updateUser, onClose }) => {  return (    
          
     Edit User
      
     
       {          CallMyApi(user.id, values).then(            updatedUser => {              actions.setSubmitting(false);              updateUser(updatedUser), onClose();            },            error => {              actions.setSubmitting(false);              actions.setErrors(transformMyAPIErrorToAnObject(error));            }          );        }}        render={({ errors, touched, isSubmitting }) => (          
                  
                   {errors.email && touched.social.email && 
       
        {errors.email}
       
}            
                   {errors.social.facebook &&              touched.social.facebook && 
       
        {errors.social.facebook}
       
}            
                   {errors.social.twitter &&              touched.social.twitter && 
       
        {errors.social.twitter}
       
}            
                 
              )}      />    
     
      );};

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被传递给一个<Button onPress={...} />，而不是HTML <form onSubmit={...} /> 组件（因为在React Native中没有<form />元素）。

（2）<TextInput />使用Formik的props.handleChange(fieldName)和handleBlur(fieldName)，而不是直接把回调函数赋值给props，因为我们必须从某处得到fieldName，而在ReactNative中我们无法你在Web中一样自动获取它（使用input的name属性）。作为可选方案，你还可以使用 setFieldValue(fieldName, value) 和setTouched(fieldName, bool) 这两个函数。

避免在render中创建新函数

如果因某种原因你想在每一个render中避免创建新函数，那么我建议你把React Native的 <TextInput /> 当作它是一个第三方提供的定制输入元素：

编写你自己的针对定制输入元素的类包装器；

传递定制组件的props.setFieldValue，而不是传递props.handleChange；

使用一个定制的change函数回调，它将调用你传递给setFieldValue的任何内容。

请参考下面的代码：

// FormikReactNativeTextInput.jsimport * 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.jsimport { 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中的<Route>。

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
      
       ) => (          
                   
        
         ) => (                
          
           {form.touched.firstName && form.errors.firstName && form.errors.firstName} 
         
              )}            />                  )}      />    
        
       
      
     
    
  );};

（二）使用withFormik()

import React from 'react';import * as Yup from 'yup';import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';// Shape of form valuesinterface FormValues {  email: string;  password: string;}interface OtherProps {  message: string;}

顺便提醒一下，你可以使用InjectedFormikProps<OtherProps, FormValues>来代替下面的实现方式。本质上，它们是相同的，只不过InjectedFormikProps是当Formik仅输出一个HOC（高阶组件）时的代替而已。而且，这个方法灵活性差一些，因为它需要对所有属性（props）进行包装。

const InnerForm = (props: OtherProps & FormikProps
    
     ) => {  const { touched, errors, isSubmitting, message } = props;  return (    
           
      {message}
      
            {touched.email && errors.email && 
      
       {errors.email}
      
}      
            {touched.password && errors.password && 
      
       {errors.password}
      
}      
          
       );};//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;