<Field />

<Field /> 会自动将输入连接到 Formik。它使用 name 属性与 Formik 状态匹配。<Field /> 默认情况下会渲染为 HTML 的 <input /> 元素。

渲染

有几种不同的方法可以使用 <Field> 进行渲染。

<Field as>
<Field children>
<Field component>
~~<Field render>~~ 在 2.x 中已弃用。使用这些会记录警告

as 可以是 React 组件，也可以是将要渲染的 HTML 元素的名称。Formik 会自动注入由 name 属性指定的字段的 onChange、onBlur、name 和 value 属性到（自定义）组件中。

children 可以是元素数组（例如，在 <Field as="select"> 的情况下为 <option>），也可以是回调函数（也称为渲染 prop）。渲染 prop 是一个包含以下内容的对象

field：一个包含字段的 onChange、onBlur、name 和 value 的对象（参见 FieldInputProps）
form：Formik 包
meta：一个包含字段元数据（即 value、touched、error 和 initialValue）的对象（参见 FieldMetaProps）

component 可以是 React 组件，也可以是将要渲染的 HTML 元素的名称。所有其他 props 都将被传递。

在 Formik 0.9 到 1.x 中，render prop 也可以用于渲染。从 2.x 开始它已被弃用。虽然代码仍然存在于 <Field> 中，但使用 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 以及直接传递给 <Field> 的任何其他 props。

默认为 '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，它与 <Field render> 的 render prop 参数相同，以及直接传递给 <Field> 的任何其他 props。

默认为 '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)

当您**不**使用自定义组件并且需要访问 Field 创建的基础 DOM 节点（例如，调用 focus）时，请将回调传递给 innerRef prop。

`name`

name: string

必填

Formik 状态中字段的名称。要访问嵌套对象或数组，name 也可以接受类似 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 prop 来运行独立的字段级验证。该函数将遵守 <Field> 的父 <Formik> / withFormik 中指定的 validateOnBlur 和 validateOnChange 配置/prop。此函数可以是同步的也可以是异步的

同步：如果无效，则返回包含错误消息的 string 或返回 undefined。
异步：返回一个 Promise，该 Promise 解析包含错误消息的 string。这与 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 );