useField()

useField は、Formikの動作を任意のフィールドコンポーネントに適用するために使用されるReactフックです。 Field が適切でない場合に、最大の柔軟性を提供します。使用方法は2つあります。

例

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]`

FieldProps、FieldMetaProps、FieldHelperProps を含む3つの要素を持つ配列（タプル）を返すカスタムReact Hookです。引数として、フィールド名の文字列またはオブジェクトを受け入れます。オブジェクトには、少なくとも name キーが含まれている必要があります。このオブジェクトは、<Field> に渡すプロパティのサブセットであり、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> に渡すプロパティのサブセットです。以下のものが含まれます。

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 - 入力がチェックされているかどうか。これは、useField に name、type: 'checkbox' または type: 'radio' を含むオブジェクトが渡された場合にのみ定義されます。
onBlur: () => void - blurイベントハンドラ
onChange: (e: React.ChangeEvent<any>) => void - changeイベントハンドラ
value: Value - フィールドの値（values から取得）。チェックボックスまたはラジオボタン入力の場合は、useField に渡された value になる可能性があります。
multiple?: boolean - 複数の値を選択できるかどうか。これは、useField に multiple: true を含むオブジェクトが渡された場合にのみ定義されます。

`FieldMetaProps<Value>`

フィールドに関する計算されたメタデータを含むオブジェクト。具体的には、

error?: string - フィールドのエラーメッセージ（errors から取得）
initialError?: string - フィールドが initialErrors に存在する場合のフィールドの初期エラー（initialErrors から取得）
initialTouched: boolean - フィールドが initialTouched に存在する場合のフィールドの初期値（initialTouched から取得）
initialValue?: Value - フィールドが initialValues に値が指定されている場合のフィールドの初期値（initialValues から取得）
touched: boolean - フィールドが訪問されたかどうか（touched から取得）
value: any - フィールドの値（values から取得）

`FieldHelperProps`

該当フィールドの値、エラー値、またはtouchedステータスを強制的に変更するために使用できるヘルパー関数を含むオブジェクト。これは、変更イベントまたはぼかしイベントをトリガーせずに、フィールドのステータスを直接変更する必要があるコンポーネントに役立ちます。

setValue(value: any, shouldValidate?: boolean): Promise<void | FormikErrors> - フィールドの値を変更する関数。これにより、validateOnChange が true（デフォルト）に設定されている場合、検証が実行されます。また、2番目の引数として false を渡すことで、検証を明示的に回避/スキップすることもできます。 validateOnChange が true に設定されていてエラーがある場合、返された Promise で解決されます。
setTouched(value: boolean, shouldValidate?: boolean): void - フィールドのtouchedステータスを変更する関数。これにより、`validateOnBlur` が `true`（デフォルト）に設定されている場合、検証が実行されます。また、2番目の引数として `false` を渡すことで、検証を明示的に回避/スキップすることもできます。 `validateOnBlur` が `true` に設定されていてエラーがある場合、返された `Promise` で解決されます。
setError(value: any): void - フィールドのエラー値を変更する関数