id: formik title:

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

<Formik>是一个可以帮助您构建表单的组件。它使用了React Motion和React Router等图书馆流行的渲染道具模式。

例

import React from 'react';
import { Formik } from 'formik';
const BasicExample = () => (
  <div>
    <h1>My Form</h1>
    <Formik
      initialValues={{ name: 'jared' }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <input
            type="text"
            onChange={props.handleChange}
            onBlur={props.handleBlur}
            value={props.values.name}
            name="name"
          />
          {props.errors.name && <div id="feedback">{props.errors.name}</div>}
          <button type="submit">Submit</button>
        </form>
      )}
    />
  </div>
);

道具

\

参考

道具

Formik渲染方法和道具

有三种方法可以渲染<Formik />

• <Formik component>
• <Formik render>
• <Formik children>

所有三种渲染方法都将传递相同的道具：

dirty: boolean

返回true如果值与初始值不完全相等，false除此以外。dirty是一个只读计算属性，不应直接变异。

errors: { [field: string]: string }

表单验证错误。应该与表格的形状相匹配values定义于initialValues。如果你正在使用validationSchema（你应该这样），键和形状将完全匹配你的模式。在内部，Formik转换原始是的验证错误代表你。如果你正在使用validate那么那个功能就决定了errors物体形状。

handleBlur: (e: any) => void

onBlur事件处理程序当您需要跟踪输入是否有效时非常有用touched或不。这应该传递给<input onBlur={handleBlur} ... />

DOM-只。使用setFieldTouched在React Native中。

handleChange: (e: React.ChangeEvent<any>) => void

常规输入更改事件处理程序这将更新values[key]哪里key是事件发射输入name属性。如果name属性不存在，handleChange将寻找输入id属性。注意：这里的“输入”表示所有HTML输入。

DOM-只。使用setFieldValue在React Native中。

handleReset: () => void

重置处理程序将表单重置为其初始状态。这应该传递给<button onClick={handleReset}>...</button>

handleSubmit: (e: React.FormEvent<HTMLFormEvent>) => void

提交处理程序这应该传递给<form onSubmit={props.handleSubmit}>...</form>。要了解有关提交过程的更多信息，请参阅表格提交。

isSubmitting: boolean

提交表单状态。返回true如果提交正在进行中false除此以外。重要提示：Formik将此设置为true一提交即尝试。要了解有关提交过程的更多信息，请参阅表格提交。

isValid: boolean

返回true如果没有errors，或结果isInitialValid形式如果处于“原始”状态（即不是dirty）。

isValidating: boolean

返回true如果Formik在提交期间或通过调用运行验证[validateForm]直false除此以外。了解更多关于会发生什么的信息isValidating在提交过程中，请参阅表格提交。

resetForm: (nextValues?: Values) => void

迫切地重置表格。这将清楚errors和touched，设定isSubmitting至false，isValidating至false，并重新运行mapPropsToValues与当前WrappedComponent的props或者作为一个论点传递了什么。后者对于呼叫很有用resetForm内componentWillReceiveProps。

setErrors: (fields: { [field: string]: string }) => void

组errors势在必行。

setFieldError: (field: string, errorMsg: string) => void

命令性地设置字段的错误消息。field应该匹配的关键errors你想更新。用于创建自定义输入错误处理程序。

setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void

强制设置字段的触摸状态。field应该匹配的关键touched你想更新。用于创建自定义输入模糊处理程序。调用此方法将触发验证以运行ifvalidateOnBlur被设置为true（默认情况下）。isTouched默认为true如果没有指定。您还可以通过传递第三个参数来明确地阻止/跳过验证false。

submitForm: () => void

触发表单提交。

submitCount: number

用户尝试提交表单的次数。增加时间handleSubmit被叫，在打电话后重置handleReset。submitCount是只读计算属性，不应直接变异。

setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void

命令式设置字段的值。field应该匹配的关键values你想更新。用于创建自定义输入更改处理程序。调用此方法将触发验证运行ifvalidateOnChange被设置为true（默认情况下）。您还可以通过传递第三个参数来明确地阻止/跳过验证false。

setStatus: (status?: any) => void

设置一个顶级status任何你想要的东西。用于控制与表单相关的任意顶级状态。例如，您可以使用它将API响应传递回组件中handleSubmit。

setSubmitting: (isSubmitting: boolean) => void

组isSubmitting势在必行。

setTouched: (fields: { [field: string]: boolean }) => void

组touched势在必行。

setValues: (fields: { [field: string]: any }) => void

组values势在必行。

status?: any

一个顶级状态对象，可用于表示无法用其他方法表示/存储的表单状态。这对于捕获和传递内部组件的API响应非常有用。

status只应通过调用来修改setStatus。

touched: { [field: string]: boolean }

感人的田野。每个键对应于已被触摸/访问的字段。

values: { [field: string]: any }

你的表格的价值观。会有结果的形状mapPropsToValues（如果指定）或所有非函数的道具传递给您的包装组件。

validateForm: (values?: any) => Promise<FormikErrors<Values>>

迫切地打电话给你validate要么validateSchema取决于指定的内容。您可以选择传递值以进行验证，并相应地修改Formik状态，否则将使用当前值values形式。

validateField: (field: string) => void

势在必行呼叫领域validate如果为给定字段指定了函数。Formik将使用当前字段值。

component?: React.ComponentType<FormikProps<Values>>

<Formik component={ContactForm} />;
const ContactForm = ({
  handleSubmit,
  handleChange,
  handleBlur,
  values,
  errors,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      onChange={handleChange}
      onBlur={handleBlur}
      value={values.name}
      name="name"
    />
    {errors.name && <div>{errors.name}</div>}
    <button type="submit">Submit</button>
  </form>
};

警告： <Formik component>优先考虑<Formik render>所以不要同时使用两者<Formik>。

render: (props: FormikProps<Values>) => ReactNode

<Formik render={props => <ContactForm {...props} />} />
<Formik
  render={({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
/>

children?: React.ReactNode | (props: FormikProps<Values>) => ReactNode

<Formik children={props => <ContactForm {...props} />} />
// or...
<Formik>
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

enableReinitialize?: boolean

默认是false。控制Formik是否应重置表格ifinitialValues变化（使用深度相等）。

isInitialValid?: boolean

默认是false。控制初始值isValid在安装之前的道具。您也可以传递一个功能。适用于要在初始安装时启用/禁用提交和重置按钮的情况。

initialValues: Values

Formik的初始字段值将使这些值可用于渲染方法组件values。

即使您的表单默认为空，也必须使用初始值初始化所有字段，否则React将抛出错误，表示您已将输入从非受控更改为受控。

注意：initialValues不适用于高阶组件，请使用mapPropsToValues代替。

onReset?: (values: Values, formikBag: FormikBag) => void

您的可选表单重置处理程序它通过你的表格values和“FormikBag”。

onSubmit: (values: Values, formikBag: FormikBag) => void

表单提交处理程序。它通过你的表格values和“FormikBag”，其中包含一个包含一个子集的对象注入道具和方法（即名称以…开头的所有方法set<Thing>+resetForm）以及传递给包装组件的任何道具。

注意：errors，touched，status并且所有事件处理程序都不包含在FormikBag。

validate?: (values: Values) => FormikErrors<Values> | Promise<any>

注意：我建议使用validationSchema和Yup进行验证。然而，validate是一种无依赖，直接的方式来验证您的表单。

验证表单values有功能。这个功能可以是：

1. 同步并返回errors宾语。

// Synchronous validation
const validate = values => {
  let errors = {};
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  //...
  return errors;
};

• 异步并返回一个错误的Promiseerrors宾语

// Async Validation
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const validate = values => {
  return sleep(2000).then(() => {
    let errors = {};
    if (['admin', 'null', 'god'].includes(values.username)) {
      errors.username = 'Nice try';
    }
    // ...
    if (Object.keys(errors).length) {
      throw errors;
    }
  });
};

validateOnBlur?: boolean

默认是true。使用此选项可以运行验证blur事件。更具体地说，当任何一个handleBlur，setFieldTouched， 要么setTouched叫做。

validateOnChange?: boolean

默认是true。使用此选项可告知Formik运行验证change事件和change相关方法。更具体地说，当任何一个handleChange，setFieldValue， 要么setValues叫做。

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

Yup架构或者返回Yup架构的函数。这用于验证。错误按键映射到内部组件errors。它的键应该匹配values。