【React(知識編)】Formik handleBlurについて

computerReact

Reactでフォームを作成する際に「handleChange」、「handleSubmit」はよく目にし、だいたいどんなものかご理解されている方は多いと思います

ただFormikを使っていると必ず出てくるのが

handleBlur

これは一体なんでしょうか?

わからないで使うのは気持ちが悪い、

詳しく知れば何か応用につながる、

などとお考えの方は是非ご一読頂き参考になれば幸いです!

初期費用ゼロ/月9,800円でWebデザインが学べる

デザインを習得するためには、客観的なフィードバックと改善が不可欠です。

以下の記事ではこんなWebデザインスクールをご紹介しています。

  • 初期費用ゼロで、月々9,800円のみ
  • オンラインで、教材が使い放題
  • コンテストや実務案件にチャレンジして報酬もGETできる

デザナルはトップデザイナーからレビューがもらえる、格安のWebデザインスクールです。

>>デザナルに興味がある方はこちらからどうぞ<<

詳細をまとめた記事もございますので、ぜひご覧ください。

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
タイトルとURLをコピーしました