id: withFormik title: withFormik()

custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/api/withFormik.md

创建一个更高阶的React组件类，它传递道具和表单处理程序（“FormikBag“）从您提供的选项派生的组件。

例

import React from 'react';
import { withFormik } from 'formik';
const MyForm = props => {
  const {
    values,
    touched,
    errors,
    handleChange,
    handleBlur,
    handleSubmit,
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name && touched.name && <div id="feedback">{errors.name}</div>}
      <button type="submit">Submit</button>
    </form>
  );
};
const MyEnhancedForm = withFormik({
  mapPropsToValues: () => ({ name: '' }),
  // Custom sync validation
  validate: values => {
    const errors = {};
    if (!values.name) {
      errors.name = 'Required';
    }
    return errors;
  },
  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  displayName: 'BasicForm',
})(MyForm);

options

\

参考

options

displayName?: string

当您的内部表单组件是无状态功能组件时，您可以使用displayName选项为组件指定一个正确的名称，以便您可以更轻松地找到它反应DevTools。如果指定，您的包装表单将显示为Formik(displayName)。如果省略，它将显示为Formik(Component)。类组件不需要此选项（例如class XXXXX extends React.Component {..}）。

enableReinitialize?: boolean

默认是false。如果包装的组件props更改（使用深度相等），则控制Formik是否应重置表单。

handleSubmit: (values: Values, formikBag: FormikBag) => void

表单提交处理程序。它通过你的表格values和“FormikBag”，其中包含一个包含一个子集的对象注入道具和方法（即名称以…开头的所有方法set<Thing>+resetForm）以及传递给包装组件的任何道具。

“FormikBag”：

• props（传递给包装组件的道具）
• resetForm
• setErrors
• setFieldError
• setFieldTouched
• setFieldValue
• setStatus
• setSubmitting
• setTouched
• setValues

注意：errors，touched，status并且所有事件处理程序都不包含在FormikBag。

isInitialValid?: boolean | (props: Props) => boolean

默认是false。控制初始值isValid在安装之前的道具。您也可以传递一个功能。适用于要在初始安装时启用/禁用提交和重置按钮的情况。

mapPropsToValues?: (props: Props) => Values

如果指定了此选项，则Formik会将其结果转换为可更新的表单状态，并使这些值可用于新组件props.values。如果mapPropsToValues如果未指定，则Formik会将所有非函数的道具映射到内部组件props.values。也就是说，如果省略它，Formik将只通过props哪里typeof props[k] !== 'function'，哪里k是一些关键。

即使您的表单没有从其父级接收任何道具，请使用mapPropsToValues初始化表单空状态。

validate?: (values: Values, props: Props) => FormikErrors<Values> | Promise<any>

注意：我建议使用validationSchema和Yup进行验证。然而，validate是一种无依赖，直接的方式来验证您的表单。

验证表单values有功能。这个功能可以是：

1. 同步并返回errors宾语。

// Synchronous validation
const validate = (values, props) => {
  let errors = {};
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  //...
  return errors;
};

• 异步并返回一个错误的Promiseerrors宾语

// Async Validation
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const validate = (values, props) => {
  return sleep(2000).then(() => {
    let errors = {};
    if (['admin', 'null', 'god'].includes(values.username)) {
      errors.username = 'Nice try';
    }
    // ...
    if (Object.keys(errors).length) {
      throw errors;
    }
  });
};

validateOnBlur?: boolean

默认是true。使用此选项可以运行验证blur事件。更具体地说，当任何一个handleBlur，setFieldTouched， 要么setTouched叫做。

validateOnChange?: boolean

默认是true。使用此选项可告知Formik运行验证change事件和change相关方法。更具体地说，当任何一个handleChange，setFieldValue， 要么setValues叫做。

validationSchema?: Schema | ((props: Props) => Schema)

Yup架构或者返回Yup架构的函数。这用于验证。错误按键映射到内部组件errors。它的键应该匹配values。

注入的道具和方法

这些与道具相同<Formik render={props => ...} />