「最初の入力が済むまで」というのは例えば、<input>要素にいくつか入力後、フォーカスが外れた時の事を指します。

formikvalidateformik.handleChangeが呼ばれる度実行されます。なので「'foo'と入力しろ」といバリデーションが設定されていた時、最初に'f'と入力しただけでもformik.errorsにエラーメッセージが入ってしまい、表示してしまいます。これはユーザーにとってはあまりいい体験ではありません。

この体験を改善する方法を Formik は提供しています。それにはformik.touched.[name]値を使います。formik.touchedとはまさにやりたかった「1度はフォーカスが外れた経験をしてるかどうか」を持ちます。この初期値(1度もフォーカスが外れてない時)はfalseになります。

このformik.touchedを使うための準備として<input>formik.handleBlurハンドラーを設定します。このハンドラーもhandleChangeなどと同じ様にnameid属性が必須になります。

です。


重要なのはエラーメッセージを表示する条件でformik.touched.fooを使っている点です。これにより「1度はフォーカスを外した経験があり、エラーメッセージがあるならそれを表示する」という条件にできます。

JavaScript で飯食べたい歴約 5 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log