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

※本サイトにはプロモーション・広告が含まれています。

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

useField

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

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

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

なんじゃこりゃ!

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

私と同じように、

useFieldの正体が知りたい!

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

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

心を折りかけたコード

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

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つ目のオブジェクトが先程取り出したものになり、2つ目のオブジェクトではエラーなどが取り出せるようになっていますね!

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

いっそのこと、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を作ってくれる、ということがわかりました

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

お役に立てれば幸いです

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

タイトルとURLをコピーしました