---

---

【React + TypeScript】formikで高機能フォームを作成｜Part3

投稿日：2021年6月23日

この記事ではformikを使用したカスタムコンポーネントの作成方法について詳しく解説しています。

---

はじめに

この記事について

環境について

参考URL

---

実践

useField()について

function useField<Val = any>(propsOrFieldName: string | FieldHookConfig<Val>): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>];

簡単なカスタムフォーム

import React from "react";
import { Formik, useField, FieldHookConfig } from "formik";
import * as Yup from "yup";

/**
 * フォームの型
 */
type FormValueType = {
    email: string;
    firstName: string;
    lastName: string;
};

/**
 * [ props ] MyTextFieldのプロパティ
 */
type MyTextFieldProps = FieldHookConfig<string> & {
    label: string;
};

/**
 * [ component ] カスタム入力フォーム
 * labelにはラベル内のコンテンツとして表示する文字列を渡し、
 * nameには対象プロパティ名を渡します
 * @param param0
 * @returns
 */
const MyTextField = ({ label, ...props }: MyTextFieldProps) => {
    const [field, meta, helper] = useField(props);

    return (
        <>
            <label htmlFor={props.id || props.name}>{label}</label>
            <input className="text-input" {...field} />
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    );
};

/**
 * バリデーションスキーマ
 */
const validationSchema = Yup.object({
    firstName: Yup.string()
        .max(15, "１５文字以下で入力してください")
        .required("このフィールドは必須です"),
    lastName: Yup.string()
        .max(15, "１５文字以下で入力してください")
        .required("このフィールドは必須です"),
    email: Yup.string()
        .email("正しいメールアドレスを入力してください")
        .required("このフィールドは必須です"),
});

/**
 * 送信処理
 * @param values
 */
const onSubmit = (values: FormValueType) => {
    alert(JSON.stringify(values, null, 2));
};

/**
 * 登録フォーム
 */
const SignupForm = () => {
    const initialValues: FormValueType = {
        email: "",
        firstName: "",
        lastName: "",
    };
    return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
        >
            {(formik) => {
                return (
                    <form onSubmit={formik.handleSubmit}>
                        <MyTextField label="メールアドレス" name="email" type="email"/>
                        <MyTextField label="姓" name="lastName" type="text"/>
                        <MyTextField label="名" name="firstName" type="text"/>
                        <button type="submit">送信</button>
                    </form>
                );
            }}
        </Formik>
    );
};

export default SignupForm;

propsをフォームに展開

<Field name="email" type="email" onClick={()=>{console.log("クリックされました")}}/>

// [...]

/**
 * [ props ] MyTextFieldのプロパティ
 */
type MyTextFieldProps = FieldHookConfig<string> & {
    label: string;
};

/**
 * [ component ] カスタム入力フォーム
 * labelにはラベル内のコンテンツとして表示する文字列を渡し、
 * nameには対象プロパティ名を渡します
 * @param param0
 * @returns
 */
const MyTextField = ({ label, ...props }: MyTextFieldProps) => {
    const [field, meta, helper] = useField(props);

    return (
        <>
            <label htmlFor={props.id || props.name}>{label}</label>
            <input className="text-input" {...field} />
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    );
};


// [...]

/home/ogihara/Projects/react_ts/formik_sample/app/src/SignupForm.tsx
TypeScript error in /home/ogihara/Projects/react_ts/formik_sample/app/src/SignupForm.tsx(34,14):
Type '{ ref?: LegacyRef<HTMLInputElement> | undefined; key?: Key | null | undefined; accept?: string | undefined; alt?: string | undefined; autoComplete?: string | undefined; ... 287 more ...; innerRef?: ((instance: any) => void) | undefined; } | { ...; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Type '{ ref?: LegacyRef<HTMLSelectElement> | undefined; key?: Key | null | undefined; autoComplete?: string | undefined; autoFocus?: boolean | undefined; ... 267 more ...; checked?: boolean | undefined; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
    Type '{ ref?: LegacyRef<HTMLSelectElement> | undefined; key?: Key | null | undefined; autoComplete?: string | undefined; autoFocus?: boolean | undefined; ... 267 more ...; checked?: boolean | undefined; }' is not assignable to type 'ClassAttributes<HTMLInputElement>'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<HTMLSelectElement> | undefined' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
          Type '(instance: HTMLSelectElement | null) => void' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
            Type '(instance: HTMLSelectElement | null) => void' is not assignable to type '(instance: HTMLInputElement | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'HTMLInputElement | null' is not assignable to type 'HTMLSelectElement | null'.
                  Type 'HTMLInputElement' is missing the following properties from type 'HTMLSelectElement': length, options, selectedIndex, selectedOptions, and 4 more.  TS2322

type FieldHookConfig<T> = GenericFieldHTMLAttributes & FieldConfig<T>;

declare type GenericFieldHTMLAttributes = JSX.IntrinsicElements['input'] | JSX.IntrinsicElements['select'] | JSX.IntrinsicElements['textarea'];

// [...]

/**
 * [ props ] MyTextFieldのプロパティ
 * 入力要素をinputに限定
 */
type MyTextFieldProps = JSX.IntrinsicElements['input'] & FieldConfig<string> &{
    label: string;
};

/**
 * [ component ] カスタム入力フォーム
 * labelにはラベル内のコンテンツとして表示する文字列を渡し、
 * nameには対象プロパティ名を渡します
 * @param param0
 * @returns
 */
const MyTextField = ({ label, ...props }: MyTextFieldProps) => {
    const [field, meta ] = useField(props);

    return (
        <>
            <label htmlFor={props.id || props.name}>{label}</label>
            <input className="text-input" {...field} {...props}/>
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    );
};

// [...]

// [...]

const MyTextField = ({ label, ...props }: MyTextFieldProps) => {
    const [field, meta ] = useField(props);

    // inputの属性のみを抽出
    const {component, as, render, children, validate, name, type, value, innerRef, ...rest} = props;
    return (
        <>
            <label htmlFor={props.id || props.name}>{label}</label>
            <input className="text-input" {...field} {...rest}/>
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    );
};

// [...]

---

---

---