<欄位 />

<欄位 /> 會自動將輸入連接到 Formik。它使用 name 屬性來與 Formik 狀態匹配。 <欄位 /> 預設為 HTML <input /> 元素。

渲染

使用 <欄位> 渲染內容的方式有幾種。

<欄位 as>
<欄位 children>
<欄位 component>
~~<欄位 render>~~ *在 2.x 中已棄用。使用這些將會記錄警告*

as 可以是 React 組件或要渲染的 HTML 元素的名稱。Formik 會自動將 name 屬性指定的欄位的 onChange、onBlur、name 和 value 屬性注入到（自定義）組件中。

children 可以是元素陣列（例如 <Field as="select"> 情況下的 <option>）或回調函數（又稱渲染屬性）。渲染屬性是一個包含以下內容的物件：

field：一個包含欄位的 onChange、onBlur、name 和 value 的物件（請參閱 FieldInputProps）
form：Formik 包
meta：一個包含關於欄位的元數據（即 value、touched、error 和 initialValue）的物件（請參閱 FieldMetaProps）

component 可以是 React 組件或要渲染的 HTML 元素的名稱。所有額外的屬性都將被傳遞。

在 Formik 0.9 到 1.x 中，render 屬性也可用於渲染。自 2.x 起已棄用。雖然程式碼仍然存在於 <欄位> 中，但使用 render 將會在控制台中顯示警告。

範例

1 import React from 'react';
2 import { Field, Form, Formik, FormikProps } from 'formik';
3 
4 const MyInput = ({ field, form, ...props }) => {
5   return <input {...field} {...props} />;
6 };
7 
8 const Example = () => (
9   <div>
10     <h1>My Form</h1>
11     <Formik
12       initialValues={{ email: '', color: 'red', firstName: '', lastName: '' }}
13       onSubmit={(values, actions) => {
14         setTimeout(() => {
15           alert(JSON.stringify(values, null, 2));
16           actions.setSubmitting(false);
17         }, 1000);
18       }}
19     >
20       {(props: FormikProps<any>) => (
21         <Form>
22           <Field type="email" name="email" placeholder="Email" />
23           <Field as="select" name="color">
24             <option value="red">Red</option>
25             <option value="green">Green</option>
26             <option value="blue">Blue</option>
27           </Field>
28 
29           <Field name="lastName">
30             {({
31               field, // { name, value, onChange, onBlur }
32               form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
33               meta,
34             }) => (
35               <div>
36                 <input type="text" placeholder="Email" {...field} />
37                 {meta.touched && meta.error && (
38                   <div className="error">{meta.error}</div>
39                 )}
40               </div>
41             )}
42           </Field>
43           <Field name="lastName" placeholder="Doe" component={MyInput} />
44           <button type="submit">Submit</button>
45         </Form>
46       )}
47     </Formik>
48   </div>
49 );

屬性

參考

屬性

`as`

as?: string | React.ComponentType<FieldProps['field']>

React 組件或要渲染的 HTML 元素的名稱。也就是以下其中之一：

input
select
textarea
有效的 HTML 元素名稱
自定義 React 組件

自定義 React 組件將會收到 onChange、onBlur、name 和 value，以及直接傳遞給 <欄位> 的任何其他屬性。

預設值為 'input'（因此預設會渲染 <input>）

1 // Renders an HTML <input> by default
2 <Field name="lastName" placeholder="Last Name"/>
3 
4 // Renders an HTML <select>
5 <Field name="color" as="select">
6   <option value="red">Red</option>
7   <option value="green">Green</option>
8   <option value="blue">Blue</option>
9 </Field>
10 
11 // Renders a CustomInputComponent
12 <Field name="firstName" as={CustomInputComponent} placeholder="First Name"/>
13 
14 const CustomInputComponent = (props) => (
15   <input className="my-custom-input" type="text" {...props} />
16 );

`children`

children?: React.ReactNode | ((props: FieldProps) => React.ReactNode)

JSX 元素或回調函數。與 render 相同。

1 // Children can be JSX elements
2 <Field name="color" as="select">
3   <option value="red">Red</option>
4   <option value="green">Green</option>
5   <option value="blue">Blue</option>
6 </Field>
7 
8 // Or a callback function
9 <Field name="firstName">
10 {({ field, form, meta }) => (
11   <div>
12     <input type="text" {...field} placeholder="First Name"/>
13     {meta.touched &&
14       meta.error && <div className="error">{meta.error}</div>}
15   </div>
16 )}
17 </Field>

`component`

component?: string | React.ComponentType<FieldProps>

React 組件或要渲染的 HTML 元素的名稱。也就是以下其中之一：

input
select
textarea
自定義 React 組件

自定義 React 組件將會收到 `FieldProps`，它與 `<欄位 render>` 的 `render` 屬性參數相同，加上直接傳遞給 `<欄位>` 的任何其他屬性。

預設值為 'input'（因此預設會渲染 <input>）

1 // Renders an HTML <input> by default
2 <Field name="lastName" placeholder="Last Name"/>
3 
4 // Renders an HTML <select>
5 <Field name="color" component="select">
6   <option value="red">Red</option>
7   <option value="green">Green</option>
8   <option value="blue">Blue</option>
9 </Field>
10 
11 // Renders a CustomInputComponent
12 <Field name="firstName" component={CustomInputComponent} placeholder="First Name"/>
13 
14 const CustomInputComponent = ({
15   field, // { name, value, onChange, onBlur }
16   form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
17   ...props
18 }) => (
19   <div>
20     <input type="text" {...field} {...props} />
21     {touched[field.name] &&
22       errors[field.name] && <div className="error">{errors[field.name]}</div>}
23   </div>
24 );

`innerRef`

innerRef?: (el: React.HTMLElement<any> => void)

當您**不**使用自定義組件且需要訪問由 `欄位` 建立的底層 DOM 節點時（例如呼叫 `focus`），請將回調傳遞給 `innerRef` 屬性。

`name`

name: string

必填

Formik 狀態中欄位的名稱。要訪問巢狀物件或陣列，名稱也可以接受類似 lodash 的點路徑，例如 `social.facebook` 或 `friends[0].firstName`

`render`

render?: (props: FieldProps) => React.ReactNode

在 2.x 中已棄用。請改用 `children`。

返回一個或多個 JSX 元素的函數。

1 // Renders an HTML <input> and passes FieldProps field property
2 <Field
3   name="firstName"
4   render={({ field /* { name, value, onChange, onBlur } */ }) => (
5     <input {...field} type="text" placeholder="firstName" />
6   )}
7 />
8 
9 // Renders an HTML <input> and disables it while form is submitting
10 <Field
11   name="lastName"
12   render={({ field, form: { isSubmitting } }) => (
13     <input {...field} disabled={isSubmitting} type="text" placeholder="lastName" />
14   )}
15 />
16 
17 // Renders an HTML <input> with custom error <div> element
18 <Field
19   name="lastName"
20   render={({ field, form: { touched, errors } }) => (
21     <div>
22       <input {...field} type="text" placeholder="lastName" />
23       {touched[field.name] &&
24         errors[field.name] && <div className="error">{errors[field.name]}</div>}
25     </div>
26   )}
27 />

`validate`

validate?: (value: any) => undefined | string | Promise<any>

您可以透過將函數傳遞給 `validate` 屬性來執行獨立的欄位級驗證。該函數將遵循 `<欄位>` 的父級 `<Formik>` / `withFormik` 中指定的 `validateOnBlur` 和 `validateOnChange` 設定/屬性。此函數可以是同步的或非同步的：

同步：如果無效，則返回包含錯誤訊息的 `string` 或返回 `undefined`。
非同步：返回一個解析包含錯誤訊息的 `string` 的 Promise。這類似於 Formik 的 `validate`，但它不是返回 `errors` 物件，而只是一個 `string`。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 // Synchronous validation function
5 const validate = value => {
6   let errorMessage;
7   if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
8     errorMessage = 'Invalid email address';
9   }
10   return errorMessage;
11 };
12 
13 // Async validation function
14 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
15 
16 const validateAsync = value => {
17   return sleep(2000).then(() => {
18     if (['admin', 'null', 'god'].includes(value)) {
19       return 'Nice try';
20     }
21   });
22 };
23 
24 // example usage
25 const MyForm = () => (
26   <Formik
27     initialValues={{ email: '', username: '' }}
28     onSubmit={values => alert(JSON.stringify(values, null, 2))}
29   >
30     {({ errors, touched }) => (
31       <Form>
32         <Field validate={validate} name="email" type="email" />
33         {errors.email && touched.email ? <div>{errors.email}</div> : null}
34         <Field validate={validateAsync} name="username" />
35         {errors.username && touched.username ? (
36           <div>{errors.username}</div>
37         ) : null}
38         <button type="submit">Submit</button>
39       </Form>
40     )}
41   </Formik>
42 );