useField()

useField 是一个 React hook，用于将 Formik 行为连接到任意字段组件。它为 Field 不合适的情况提供了最大的灵活性。有两种方法可以使用它。

示例

1 import React from 'react';
2 import { useField, Form, FormikProps, Formik } from 'formik';
3 
4 interface Values {
5   firstName: string;
6   lastName: string;
7   email: string;
8 }
9 
10 const MyTextField = ({ label, ...props }) => {
11   const [field, meta] = useField(props);
12   return (
13     <>
14       <label>
15         {label}
16         <input {...field} {...props} />
17       </label>
18       {meta.touched && meta.error ? (
19         <div className="error">{meta.error}</div>
20       ) : null}
21     </>
22   );
23 };
24 
25 const Example = () => (
26   <div>
27     <h1>My Form</h1>
28     <Formik
29       initialValues={{
30         email: '',
31         firstName: 'red',
32         lastName: '',
33       }}
34       onSubmit={(values, actions) => {
35         setTimeout(() => {
36           alert(JSON.stringify(values, null, 2));
37           actions.setSubmitting(false);
38         }, 1000);
39       }}
40     >
41       {(props: FormikProps<Values>) => (
42         <Form>
43           <MyTextField name="firstName" type="text" label="First Name" />
44           <MyTextField name="lastName" type="text" label="Last Name" />
45           <MyTextField name="email" type="email" label="Email" />
46           <button type="submit">Submit</button>
47         </Form>
48       )}
49     </Formik>
50   </div>
51 );

参考

`useField<Value = any>(name: string | FieldHookConfig<Value>): [FieldInputProps<Value>, FieldMetaProps<Value>, FieldHelperProps]`

一个自定义的 React Hook，它返回一个 3 元组（一个包含三个元素的数组），其中包含 FieldProps、FieldMetaProps 和 FieldHelperProps。它接受一个字段名称的字符串或一个对象作为参数。该对象必须至少包含一个 name 键。此对象是您传递给 <Field> 的 props 的子集，并且 FieldProps 中的值和函数将完全模仿 <Field> 的行为。这很有用，并且通常是首选，因为它允许您在对象包含相关键/值（例如 type: 'checkbox'、multiple: true 等）时利用 Formik 的复选框、单选按钮和多选行为。

FieldMetaProps 包含关于字段的计算值，这些值可用于设置样式或以其他方式更改字段。FieldHelperProps 包含辅助函数，允许您以命令式方式更改字段的值。

1 import React from 'react';
2 import { useField } from 'formik';
3 
4 function MyTextField(props) {
5   // this will return field props for an <input />
6   const [field, meta, helpers] = useField(props.name);
7   return (
8     <>
9       <input {...field} {...props} />
10       {meta.error && meta.touched && <div>{meta.error}</div>}
11     </>
12   );
13 }
14 
15 function MyInput(props) {
16   // this will return field exactly like <Field>{({ field }) => ... }</Field>
17   const [field, meta] = useField(props);
18   return (
19     <>
20       <input {...field} {...props} />
21       {meta.error && meta.touched && <div>{meta.error}</div>}
22     </>
23   );
24 }
25 
26 function MyOtherComponent(props) {
27   // This isn't an input, so instead of using the values in 'field' directly,
28   // we'll use 'meta' and 'helpers'.
29   const [field, meta, helpers] = useField(props.name);
30 
31   const { value } = meta;
32   const { setValue } = helpers;
33 
34   const isSelected = v => (v === value ? 'selected' : '');
35 
36   return (
37     <div className="itemsPerPage">
38       <button onClick={() => setValue(5)} className={isSelected(5)}>
39         5
40       </button>
41       <button onClick={() => setValue(10)} className={isSelected(10)}>
42         10
43       </button>
44       <button onClick={() => setValue(25)} className={isSelected(25)}>
45         25
46       </button>
47     </div>
48   );
49 }

`FieldHookConfig<Value>`

此对象是您传递给 <Field> 的 props 的子集。它包含

name: string - 字段的名称
validate?: (value: any) => undefined | string | Promise<any> - 请参阅<Field> 的文档
type?: string - HTML 输入的类型（text、number 等）
multiple?: boolean - 是否可以选择多个值。
value?: string- 仅适用于类型为 checkbox 和 radio 的输入。提交表单时，复选框和单选按钮会使用提供的 value 提交。在MDN上了解更多信息。

`FieldInputProps<Value>`

一个包含以下内容的对象

name: string - 字段的名称
checked?: boolean - 输入是否被选中，这仅在将包含 name、type: 'checkbox' 或 type: 'radio' 的对象传递给 useField 时定义。
onBlur: () => void - 模糊事件处理程序
onChange: (e: React.ChangeEvent<any>) => void - 更改事件处理程序
value: Value - 字段的值（从 values 中提取）或者，如果它是复选框或单选按钮输入，则可能是传递给 useField 的 value。
multiple?: boolean - 是否可以选择多个值。这仅在将包含 multiple: true 的对象传递给 useField 时定义。

`FieldMetaProps<Value>`

一个包含与字段相关的计算元数据。更具体地说，

error?: string - 字段的错误消息（从 errors 中提取）
initialError?: string - 如果字段存在于 initialErrors 中，则为字段的初始错误（从 initialErrors 中提取）
initialTouched: boolean - 如果字段存在于 initialTouched 中，则为字段的初始值（从 initialTouched 中提取）
initialValue?: Value - 如果字段在 initialValues 中被赋予值，则为字段的初始值（从 initialValues 中提取）
touched: boolean - 字段是否已被访问（从 touched 中提取）
value: any - 字段的值（从 values 中提取）

`FieldHelperProps`

一个包含辅助函数的对象，您可以使用这些函数以命令式方式更改相关字段的值、错误值或已触碰状态。这对于需要直接更改字段状态的组件很有用，而无需触发更改或模糊事件。

setValue(value: any, shouldValidate?: boolean): Promise<void | FormikErrors> - 用于更改字段值的函数。调用此函数将触发验证运行，前提是 validateOnChange 设置为 true（默认情况下为 true）。您还可以通过将第二个参数传递为 false 来显式防止/跳过验证。如果 validateOnChange 设置为 true 并且存在错误，则它们将在返回的 Promise 中解析。
setTouched(value: boolean, shouldValidate?: boolean): void - 用于更改字段已触碰状态的函数。调用此函数将触发验证运行，前提是 validateOnBlur 设置为 true（默认情况下为 true）。您还可以通过将第二个参数传递为 false 来显式防止/跳过验证。如果 validateOnBlur 设置为 true 并且存在错误，则它们将在返回的 Promise 中解析。
setError(value: any): void - 用于更改字段错误值的函数