nju33ノート一覧へ簡単なフォーム実装までuseFormikを使う方法が一番簡単だと思います。このフックはフォームを操作する為の様々なハンドラーを返します。以下のように使います。...};useFormikはいくつらオプションを受け取ります。ここではまだ全て書きませんが、initialValuesとonSubmitは必須、validateはオプショナルですがほぼ置いたほうが良いので取り上げます。initialValuesはそのフォームの初期値でオブジェクトで指定します。'',};のような感じです。太郎'のような値を置いてあげます。onSubmitは投稿した際に発火するハンドラーです。アクションを流したり様々なことができます。このハンドラーは下記のバリデーションチェックで返すオブジェクトが空(エラーが無い)場合のみ発火されます。validateはフォーム値のバリデーションチェックを行います。この関数はフォーム内のformik.handleChangeが呼ばれる度実行されます。その関数にはその時のvaluesは引数として渡されるので、値が正しいかどうかを確認できます。この関数で返したオブジェクトはformik.errorsの中身として渡されるので、formik.errorsの対象のプロパティがあるかどうかや、それにエラーメッセージがあるかどうかでエラーメッセージの出し分けができます。);};ここで使ってるformikプロパティはhandleSubmitとhandleChange、errorsの3つです。errorsは上記のバリデーションチェックの辺りに書きました。formik.handleSubmitを対象の<form>タグに必ず渡します。サイクルを回してonSubmitを発火してくれます。<input>や<textarea>タグなど入力を期待する要素にはformik.handleChangeを設定します。このハンドラーを設定するタグにはnameかid属性が必ず必要です。その名前を見て、その名前のvaluesのプロパティ値を更新する為です。上記のフォームではinput[name=foo]がありますが、nameという値にはバリデーションで'foo'しか渡せないようになってます。}}>{formik.errors.foo}</span>のような要素を表示するといったことができます。最初の入力が済むまでエラーメッセージを表示しない「最初の入力が済むまで」というのは例えば、<input>要素にいくつか入力後、フォーカスが外れた時の事を指します。formikのvalidateはformik.handleChangeが呼ばれる度実行されます。「'foo'と入力しろ」といバリデーションが設定されていた時、最初に'f'と入力しただけでもformik.errorsにエラーメッセージが入ってしまい、表示してしまいます。これはユーザーにとってはあまりいい体験ではありません。それにはformik.touched.[name]値を使います。formik.touchedとはまさにやりたかった「1度はフォーカスが外れた経験をしてるかどうか」を持ちます。この初期値(1度もフォーカスが外れてない時)はfalseになります。このformik.touchedを使うための準備として<input>にformik.handleBlurハンドラーを設定します。このハンドラーもhandleChangeなどと同じ様にnameかid属性が必須になります。)}</label>重要なのはエラーメッセージを表示する条件でformik.touched.fooを使っている点です。これにより「1度はフォーカスを外した経験があり、エラーメッセージがあるならそれを表示する」という条件にできます。定義したスキーマオブジェクトを渡すと規模によっては楽にバリデーションを実装できるかもしれません。注意点としてvalidationSchemaよりvalidateの方が優先されます。この2つは一緒に設定することがないようにしましょう。);};validationSchemaはyup.object().shape({...})のような形で作ります。この各プロパティに更にスキーマを設定していきます。ここではfooプロパティの値に対して設定をしてます。message)によってfooじゃないと駄目もし引っかかった時引数のメッセージがformik.errorsに渡されます。"/^foo$/"のような日本人やプログラミングが分からない人には分かりづらいメッセージになってしまう為必ず設定すると良いです。バリデーションStringmin(n)とmax(m)両方設定して「n未満とmより大きいのは駄目」なスキーマができます。yup.string().min(2).max(30)emailでメールアドレスじゃないと弾かれるスキーマができます。形以外の文字列が弾かれるスキーマができます。yup.string().url()Numbermin(n)とmax(m)両方設定して「数値がn未満とmより大きいのは駄目」なスキーマができます。yup.number().min(10).max(100)以上と以下の意味にするlessThanとmoreThanもあります。yup().number().lessThan(10).moreThan(100)Arrayinput[type=checkbox]などで必須チェックを実装する時に使えます。チェックされた時は['on']、そうでない場合は[]となるので、yup.array().required()で確認できます。配列のrequiredは要素数が0だと偽として扱います。Mixedmixedを使うと「AかBか...どれかなら大丈夫」といったスキーマを作れます。oneOfを使うと渡した値のどれかなら大丈夫なスキーマができます。