建立一個高階 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 開發人員工具 中找到它。如果指定，您的包裝表單將顯示為 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）以及傳遞給包裝元件的任何 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

控制掛載前 isValid prop 的初始值。您也可以傳遞一個函式。適用於您想要在初始掛載時啟用/禁用提交和重置按鈕的情況。

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 提供給新元件。適用於將任意已觸碰狀態（即將欄位標記為已訪問）實例化到您的表單中。提醒一下，如果表單被重置，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。此函式可以是

1. 同步並返回一個 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 };

validateOnBlur?: boolean

預設值為 true。使用此選項可在 blur 事件上執行驗證。更具體地說，當呼叫 handleBlur、setFieldTouched 或 setTouched 時。

validateOnChange?: boolean

預設值為 true。使用此選項告訴 Formik 在 change 事件和與 change 相關的方法上執行驗證。更具體地說，當呼叫 handleChange、setFieldValue 或 setValues 時。

validateOnMount?: boolean

預設值為 false。使用此選項可指示 Formik 在包裝的組件掛載和/或 initialValues 變更時（以低優先級）執行驗證。

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

一個 Yup schema 或一個返回 Yup schema 的函式。這用於驗證。錯誤會透過 key 對應到內部組件的 errors。它的 key 應該與 values 的 key 相符。

注入的屬性和方法

這些與 <Formik render={props => ...} /> 的屬性相同。