useFormik()

useFormik() 是一個自定義的 React hook，它會直接返回所有 Formik 狀態和輔助函式。儘管它的名稱如此，但它並不適用於大多數的使用案例。在內部，Formik 使用 useFormik 來創建 <Formik> 組件（它會渲染一個 React Context 提供者）。如果您嘗試透過 context 訪問 Formik 狀態，請使用 useFormikContext。只有在您 *沒有* 使用 <Formik> 或 withFormik 時才使用此 hook。

**請注意，<Field>、<FastField>、<ErrorMessage>、connect() 和 <FieldArray> *不會* 與 useFormik() 一起使用，因為它們都需要 React Context。

`useFormik()` 的使用案例

你是 Jared
(This likely refers to a specific inside joke or context. Consider replacing with a more general example if this document is for a broader audience. For example: "您需要客製化表單行為")
您正在修改返回值並創建一個修改版本的 <Formik> 供自己使用
您想要避免使用 React Context（可能是出於效能考量）

範例

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   const formik = useFormik({
6     initialValues: {
7       firstName: '',
8       lastName: '',
9       email: '',
10     },
11     onSubmit: values => {
12       alert(JSON.stringify(values, null, 2));
13     },
14   });
15   return (
16     <form onSubmit={formik.handleSubmit}>
17       <label htmlFor="firstName">First Name</label>
18       <input
19         id="firstName"
20         name="firstName"
21         type="text"
22         onChange={formik.handleChange}
23         value={formik.values.firstName}
24       />
25       <label htmlFor="lastName">Last Name</label>
26       <input
27         id="lastName"
28         name="lastName"
29         type="text"
30         onChange={formik.handleChange}
31         value={formik.values.lastName}
32       />
33       <label htmlFor="email">Email Address</label>
34       <input
35         id="email"
36         name="email"
37         type="email"
38         onChange={formik.handleChange}
39         value={formik.values.email}
40       />
41       <button type="submit">Submit</button>
42     </form>
43   );
44 };