Reactでフォームを作成する際に「handleChange」、「handleSubmit」はよく目にし、だいたいどんなものかご理解されている方は多いと思います
ただFormikを使っていると必ず出てくるのが
handleBlur
これは一体なんでしょうか？
わからないで使うのは気持ちが悪い、
詳しく知れば何か応用につながる、
などとお考えの方は是非ご一読頂き参考になれば幸いです！
✔Webアプリの公開にはVPSがおすすめ
DjangoなどのWebアプリは、レンタルサーバーでの公開ができません。
自由度の高いVPSを使うのです。
VPS11社を比較し、おすすめをご紹介しています。
Webアプリの公開には、Ubuntuが搭載できるVPSを選びましょう。
Ubuntu環境が用意できたら、こちらのチュートリアルで公開方法を無料公開中。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
handleBlurの役割
結論を先にお伝えします
handleBlurがあることで、
フォーカスが外れるまでエラー判定を待ってくれます
※フォーカスとは入力フォームを選択肢し、入力できる状態になっていること。
言葉ではわかりにくいかもしれませんのでHTMLページの画像で見てみましょう
handleBlur無し
文字を1文字でも打つと
エラー表示されます！
名前を打っているのにも関わらず、メールアドレスフォームのエラーが既に発動します
ちょっと不便ですよね？
handleBlurを設定
文字を打っても先程のエラーは出てきません！
設定のためのコード
handleBlurを設定するために、下記を追記してます
<input
....
....
onBlur={formik.handleBlur}
....
/>
{ formik.touched.name &&formik.errors.....}
何がおきてるの？
formik.touched.<フォームname>
とは、そのフォームが一度でもフォーカスされて外れる、つまり入力が終わったと判断された時に「true」に変わる属性です
この属性をチェックしエラーを出し入れしているのが、handleBlurです
つまり、formik.touchedが設定されていても、formik.handleBlurが設定されていなければ効果はありません
まとめ
私は当初、
handleBlurって何？
handleBlurっているの？
なんて浅はかに思っていました
ただ学んでいくと、
formik.touchedの値により、エラーを出し入れする
役割があることを知り、不可欠であることを認識した次第です
この知識が直接役に立つかはわかりませんが、少しでも皆様のなんで？どうして？にお答えできていれば嬉しいです！
最後にはなりますが、今回のコードを下記の通り参考までお見せします
最後までご覧いただき、ありがとうございました！！！
【今回のコード】
cssではbootstrapを使っています
import React from "react"
import { useFormik } from "formik"
import * as Yup from "yup"
const validate = Yup.object({
name: Yup.string().max(15, "名前は15文字までです").required("名前必須"),
email: Yup.string().email("Eメールアドレスが無効です").required("メールアドレス必須"),
})
const SignupForm = () => {
const formik = useFormik({
initialValues: {
name: "",
email: "",
},
validationSchema: validate,
onSubmit: values => {
alert(JSON.stringify(values, null, 2))
}
})
return (
<form
onSubmit={formik.handleSubmit}
autoComplete="off"
>
<div className="w-25 mx-auto my-3">
<label htmlFor="name">名前</label>
<input
id="name"
name="name"
type="text"
onChange={formik.handleChange}
value={formik.values.name}
onBlur={formik.handleBlur}
className="form-control"
/>
{ formik.touched.name &&
formik.errors.name ?
<div className="text-danger">
{formik.errors.name}
</div> :
null
}
</div>
<div className="w-25 mx-auto my-3">
<label htmlFor="email">
メールアドレス
</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
onBlur={formik.handleBlur}
className="form-control"
/>
{ formik.touched.email &&
formik.errors.email ?
<div className="text-danger">
{formik.errors.email}
</div> :
null
}
</div>
<div className="w-25 text-center mx-auto">
<button
type="submit"
className="btn btn-primary w-100 my-3"
>Submit</button>
</div>
</form>
)
}
export default SignupForm