id: field title:

custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/api/field.md

<Field />将自动连接到 Formik 的输入。它使用了name属性与 Formik 状态匹配。<Field />将默认为 HTML<input />元件。

场渲染道具

有 3 种方法可以渲染<Field>。

  • <Field component>
  • <Field render>
  • <Field children>

除了字符串之外component，为了您的方便，每个渲染道具都传递相同的道具。

Field 的渲染道具是一个包含以下内容的对象：

  • field：包含的对象onChange，onBlur，name，和value领域的
  • form：Formik 包。
  • 任何其他道具传递到现场

例

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

道具

\

参考

道具

children

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

无论是 JSX 元素还是回调函数。与…一样render。

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

component

component?: string | React.ComponentType<FieldProps>

要么是 React 组件，要么是要呈现的 HTML 元素的名称。也就是说，以下之一：

  • input
  • select
  • textarea
  • 自定义的 React 组件

将传递自定义反应组件FieldProps这是一样的render支柱参数<Field render>加上任何其他道具直接传递到<Field>。

默认是'input'（所以<input>默认情况下呈现）

  1. // Renders an HTML <input> by default
  2. <Field name="lastName" placeholder="Last Name"/>
  4. // Renders an HTML <select>
  5. <Field name="color" component="select" placeholder="Favorite Color">
  6.   <option value="red">Red</option>
  7.   <option value="green">Green</option>
  8.   <option value="blue">Blue</option>
  9. </Field>
  11. // Renders a CustomInputComponent
  12. <Field name="firstName" component={CustomInputComponent} placeholder="First Name"/>
  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 节点Field（例如打电话focus），将回调传递给innerRef反而道具。

name

name: string 需要

Formik 状态下的字段名称。要访问嵌套对象或数组，name 也可以接受像 lodash 一样的点路径social.facebook要么friends[0].firstName

render

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

一个返回一个或多个 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. />
  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. />
  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支柱。该功能将尊重validateOnBlur和validateOnChange在/中指定的配置/道具<Field>'s亲<Formik>/withFormik。此函数可以是同步函数，也可以是异步函数：

  • 同步：如果无效，则返回 astring包含错误消息或返回undefined。

  • 异步：返回一个抛出一个的 Promisestring包含错误消息。这就像 Formik 一样validate，而不是返回errors对象，它只是一个string。

  1. import React from 'react';
  2. import {Formik, Form, Field} from 'formik';
  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. };
  13. // Async validation function
  14. const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
  16. const validateAsync = value => {
  17.   return sleep(2000).then(() => {
  18.     if (['admin', 'null', 'god'].includes(value)) {
  19.       throw 'Nice try';
  20.     }
  21.   });
  22. };
  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. );

注意：要允许 i18n 库，可以使用 TypeScript 类型validate略微放松，让你返回一个Function（例如。i18n('invalid')）。