withFormik()

创建一个高阶 React 组件类，将 props 和表单处理程序（“FormikBag”）传递到从提供的选项派生的组件中。

示例

1 import React from 'react';
2 import { withFormik } from 'formik';
3 
4 const MyForm = props => {
5   const {
6     values,
7     touched,
8     errors,
9     handleChange,
10     handleBlur,
11     handleSubmit,
12   } = props;
13   return (
14     <form onSubmit={handleSubmit}>
15       <input
16         type="text"
17         onChange={handleChange}
18         onBlur={handleBlur}
19         value={values.name}
20         name="name"
21       />
22       {errors.name && touched.name && <div id="feedback">{errors.name}</div>}
23       <button type="submit">Submit</button>
24     </form>
25   );
26 };
27 
28 const MyEnhancedForm = withFormik({
29   mapPropsToValues: () => ({ name: '' }),
30 
31   // Custom sync validation
32   validate: values => {
33     const errors = {};
34 
35     if (!values.name) {
36       errors.name = 'Required';
37     }
38 
39     return errors;
40   },
41 
42   handleSubmit: (values, { setSubmitting }) => {
43     setTimeout(() => {
44       alert(JSON.stringify(values, null, 2));
45       setSubmitting(false);
46     }, 1000);
47   },
48 
49   displayName: 'BasicForm',
50 })(MyForm);

`options`

参考

`options`

`displayName?: string`

当您的内部表单组件是无状态函数组件时，您可以使用displayName选项为组件提供一个合适的名称，以便您可以在React DevTools中更轻松地找到它。如果指定，您的包装表单将显示为Formik(displayName)。如果省略，它将显示为Formik(Component)。此选项对于类组件（例如class XXXXX extends React.Component {..}）不是必需的。

`enableReinitialize?: boolean`

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

`handleSubmit: (values: Values, formikBag: FormikBag) => void | Promise<any>`

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

“FormikBag”

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

注意：errors、touched、status和所有事件处理程序都不包含在FormikBag中。

重要：如果onSubmit是异步的，则 Formik 将自动代表您将isSubmitting设置为false，一旦它已解析。这意味着您不需要手动调用formikBag.setSubmitting(false)。但是，如果您的onSubmit函数是同步的，则需要自己调用setSubmitting(false)。

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

在 2.x 中已弃用，请改用mapPropsToErrors

控制挂载前isValidprop的初始值。您还可以传递一个函数。对于在初始挂载时想要启用/禁用提交和重置按钮的情况很有用。

`mapPropsToErrors?: (props: Props) => FormikErrors<Values>`

如果指定了此选项，则 Formik 将将其结果传输到可更新的表单状态，并将这些值最初作为props.errors提供给新组件。对于将任意错误状态实例化到您的表单中很有用。提醒一下，一旦验证运行，props.errors将被覆盖。如果表单被重置，Formik 也会将props.errors重置为此初始值（并且此函数将重新运行）。

`mapPropsToStatus?: (props: Props) => any`

如果指定了此选项，则 Formik 将将其结果传输到可更新的表单状态，并将这些值作为props.status提供给新组件。对于将任意状态存储或实例化到您的表单中很有用。提醒一下，如果表单被重置，status将重置为此初始值（并且此函数将重新运行）。

`mapPropsToTouched?: (props: Props) => FormikTouched<Values>`

如果指定了此选项，则 Formik 将将其结果传输到可更新的表单状态，并将这些值作为props.touched提供给新组件。对于将任意 touched 状态（即标记字段为已访问）实例化到您的表单中很有用。提醒一下，如果表单被重置，Formik 将使用此初始值（并且此函数将重新运行）。

`mapPropsToValues?: (props: Props) => Values`

如果指定了此选项，则 Formik 将将其结果传输到可更新的表单状态，并将这些值作为props.values提供给新组件。如果未指定mapPropsToValues，则 Formik 将所有非函数的 props 映射到内部组件的props.values。也就是说，如果您省略它，Formik 将只传递props，其中typeof props[k] !== 'function'，其中k是某个键。

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

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

注意：我建议使用validationSchema和 Yup 进行验证。但是，validate是一种无需依赖项的、简单的方法来验证您的表单。

使用函数验证表单的values。此函数可以是

同步并返回一个errors对象。

1 // Synchronous validation
2 const validate = (values, props) => {
3   const errors = {};
4 
5   if (!values.email) {
6     errors.email = 'Required';
7   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
8     errors.email = 'Invalid email address';
9   }
10 
11   //...
12 
13   return errors;
14 };

异步并返回一个解析为包含errors的对象的 Promise

1 // Async Validation
2 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
3 
4 const validate = (values, props) => {
5   return sleep(2000).then(() => {
6     const errors = {};
7     if (['admin', 'null', 'god'].includes(values.username)) {
8       errors.username = 'Nice try';
9     }
10     // ...
11     return errors;
12   });
13 };