簡単なフォーム実装まで

useFormikを使う方法が一番簡単だと思います。このフックはフォームを操作する為の様々なハンドラーを返します。以下のように使います。

import {useFormik} from 'formik';

const AComponent = () => {
  const formik = useFormik(options);
  // ...
};

useFormikはいくつらオプションを受け取ります。ここではまだ全て書きませんが、initialValuesonSubmitは必須、validateはオプショナルですがほぼ置いたほうが良いので取り上げます。

initialValuesはそのフォームの初期値でオブジェクトで指定します。例えば連絡フォームであれば、

const initialValues = {
  name: '',
  email: '',
};

のような感じです。既存のデータのものを復元する際は''ではなく、'佐藤 太郎'のような値を置いてあげます。

onSubmitは投稿した際に発火するハンドラーです。ハンドラーは引数としてその時のフォーム値を受け取るので、API に POST したり、Reducer にアクションを流したり様々なことができます。このハンドラーは下記のバリデーションチェックで返すオブジェクトが空(エラーが無い)場合のみ発火されます。

validateはフォーム値のバリデーションチェックを行います。この関数はフォーム内のformik.handleChangeが呼ばれる度実行されます。その関数にはその時のvaluesは引数として渡されるので、値が正しいかどうかを確認できます。この関数で返したオブジェクトはformik.errorsの中身として渡されるので、formik.errorsの対象のプロパティがあるかどうかや、それにエラーメッセージがあるかどうかでエラーメッセージの出し分けができます。

です。

import { useFormik } from "formik";

const AComponent = () => {
  const formik = useFormik({
    initialValues: {
      foo: ""
    },
    validate(values) {
      if (values.foo !== "foo") {
        return { foo: "Please enter `foo`" };
      }

      return {};
    },
    onSubmit: values => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label>
        name: <input name="foo" onChange={formik.handleChange} />
        {formik.errors.foo && (
          <span style={{ color: "red" }}>{formik.errors.foo}</span>
        )}
      </label>
      
      <button type="submit">Submit</button>
    </form>
  );
};

ここで使ってるformikプロパティはhandleSubmithandleChangeerrorsの3つです。errorsは上記のバリデーションチェックの辺りに書きました。

formik.handleSubmitを対象の<form>タグに必ず渡します。よしなに Fromik がサイクルを回してonSubmitを発火してくれます。

<input><textarea>タグなど入力を期待する要素にはformik.handleChangeを設定します。このハンドラーを設定するタグにはnameid属性が必ず必要です。Formik はその名前を見て、その名前のvaluesのプロパティ値を更新する為です。

上記のフォームではinput[name=foo]がありますが、nameという値にはバリデーションで'foo'しか渡せないようになってます。なのでaahogeなどと入力するとformik.errors.fooにエラーメッセージが渡る為、その時だけ<span style={{ color: "red" }}>{formik.errors.foo}</span>のような要素を表示するといったことができます。