FormikでFieldをカスタマイズする際に出てくる、
useField
について解説していきます
公式ドキュメントのチュートリアルを行っていたところ、「useField」が出てきました
特に解説等が見当たらず、
なんじゃこりゃ！
とわからないまま使うのも気持ち悪いので色々と試してみました
私と同じように、
useFieldの正体が知りたい！
という方は必見の内容です！
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
心を折りかけたコード
これが出てきて心が折れかけました！
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を作ってくれる、ということがわかりました
実際にはここまで知らなくても使うことはできますが、わからないと気持ち悪いという方から、何かしら応用できないかと考えている人まで、お役に立てるのではと記事にさせていただいた次第です
お役に立てれば幸いです
最後までご覧いただきありがとうございました！！！