【React(知識編)】Formik学習 useFieldとは？？useFieldの正体を暴く！

FormikでFieldをカスタマイズする際に出てくる、

useField

について解説していきます

公式ドキュメントのチュートリアルを行っていたところ、「useField」が出てきました

特に解説等が見当たらず、

なんじゃこりゃ！

とわからないまま使うのも気持ち悪いので色々と試してみました

私と同じように、

useFieldの正体が知りたい！

という方は必見の内容です！

心を折りかけたコード

これが出てきて心が折れかけました！

const MyTextInput = ({label, ...props}) => {    
    const [field] = useField(props)
    return (
        <>
            <label 
　　　　htmlFor={props.name}
　　    >{label}</label>
            <input 
　　　　{...field} 
　　　　{...props} 
　　　/>
        </>
    )
}

カスタムコンポーネント「MyTextInput」を作成しているときのコードです

const [field] = useField(props)

や

<input {...field} {...props} />

など、

わけわからん！

と調べまくったので下記に解説します

「props」について

const MyTextInput = ({label, ...props}) => {

Reactではコンポーネント間ではよく「props」を使って値が渡されます

まずはこの「props」を見てみます

console.logで見てみると、

 {
   "name": "name",
   "type": "text",
   "placeholder": "名前"
 }

と出てきました

実際のコードで、

            <MyTextInput
                label="名前"
                name="name"
                type="text"
                placeholder="名前"
            />

と値を渡しています

そのうちの「label」以外が「props」として出てきてきます

「field」について

const [field] = useField(props)

console.logで見てみましょう

{
 name: "name", 
  value: "", 
  onChange: ƒ, 
  onBlur: ƒ
}

useField(props)から取り出したオブジェクト「field」には、

name, value, onChange, onBlurの4つプロパティが存在しています

そもそもuseFieldで何が起きているのでしょうか？

useFieldで何が起きているの？

console.log(useField(props))

[OUTPUT]

0:
name: "name"
onBlur: ƒ ()
onChange: ƒ ()
value: ""
1:
error: undefined
initialError: undefined
initialTouched: false
initialValue: ""
touched: false
value: ""
2:
setError: ƒ setError(value)
setTouched: ƒ setTouched(value, shouldValidate)
setValue: ƒ setValue(value, shouldValidate)

useFieldは、

3つのオブジェクトが入っているArray

ですね！

そのうち1つ目のオブジェクトが先程取り出したものになり、２つ目のオブジェクトではエラーなどが取り出せるようになっていますね！

ただ、中身がわかったもののこれだけだとどんな役割かわかりませんね！

いっそのこと、fieldをなくしてみましょう！

useFieldの役割

「field」がないと？？

元々の

<input {...field} {...props} />

を、

<input {...props} />

に書き換え、{…field}をなくしてみます！

すると、

データを送信しても、valuesに何も反映されない

ということがわかりました！

結論

useFieldで取り出した「field」がないと、

name: "name"
onBlur: ƒ ()
onChange: ƒ ()
value: ""

の、value(入力した値)を受け取ることや、onBlur, onChangeまで反応しなくなってしまいます

まとめ

カスタムコンポーネントを作成する際に使う「useField」

コンポーネントに渡した値（「type」「name」など）以外にも、

value, onChange, onBlur

などのReactフォームには欠かせないpropsを作ってくれる、ということがわかりました

実際にはここまで知らなくても使うことはできますが、わからないと気持ち悪いという方から、何かしら応用できないかと考えている人まで、お役に立てるのではと記事にさせていただいた次第です

お役に立てれば幸いです

最後までご覧いただきありがとうございました！！！