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

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

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

getFieldProps

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

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

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

筆者プロフィール

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

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

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

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

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

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

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

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

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

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

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

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

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をコピーしました