【React(学習用)】Formikチュートリアル getFieldPropsとは?getFieldPropsを使う

paintingReact

こちらの記事では、Formikチュートリアルの一環として、

getFieldProps

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

公式ドキュメントのチュートリアル

をベースとしていますので、英語でも大丈夫!という方はぜひご覧ください!

筆者プロフィール

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

【現職】プロマネ/システムプランニング

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

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

ChatGPTでLINEボット

【今なら無料】ChatGPTでLINEボットを作りました!

友だち追加

getFieldPropsの役割

formikによって、Reactのフォームで毎回記述が必要な、

handleChangeやhandleSubmit

の記述がほぼいらなくなりました

ただ、formikはまだまだこんなもんじゃない!

もっと簡略化できるんです!

と言いますのも、formikで通常に書かれたフォームをみてみると、

onChangeに対してのhandleChange、

onBlurに対してのhandleBlur

や、

フォームのname、valueなどには同じ記述が目につきます

こういった記述を簡略化するためにできたのが、

getFieldProps

です!

以下で見ていきましょう!

getFieldPropsを使ったコードはこちら!

 <input 
       type="text"
       {...formik.getFieldProps('lastName')}
 />

こちらがgetFieldPropsの記述を抜き出したものになります

inputタグの場合は、type以外は共通性があるので全て

{...formik.getFieldProps(<フォームのname>}

で代用ができます

随分と簡略化されたのがわかるかと思います!

フォーム一つだけだと大きな簡略化にはならないかもしれませんが、いくつもフォームがある場合などでは大きな違いとなりますね!

getFieldPropsを見てみる

getFieldPropsについて詳しく見てみたい!という方は、returnの前に、

console.log(formik.getFieldProps("lastName"))

など()内にフォームのnameを入れてみてください

[OUTPUT]

{
name: "lastName",
value: "",
onBlur: f,
onChange: f
}

とオブジェクトが作られているのがわかります

また、通常のフォームと同様に打ち込むたびに「value」に値が反映されていくのもわかると思います

まとめ

formik getFieldPropsを使い、

{... formik.getFieldProps(フォーム名)}

とすると、

name=フォーム名

onBlur=handleBlur

onChange=handleChange

value={formik.values.フォーム名}

が不要になります

より簡潔できれいなコードを目指し、是非ご活用ください!

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

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