Formikでフォームにデフォルト値を設定するにはどうすればよいか？

formik.md

Formikでフォームにデフォルト値を設定するにはどうすればよいか？

FormikとはReactで簡単にフォームを管理できるライブラリです。 Formikを利用することで、以下を1か所で管理することができます。

• フォーム内外で値の取得
• バリデーションとエラーメッセージ
• 送信の処理

Formikを使って、外部APIから取得した値をフォームの初期値に設定したいときにはどうすればよいでしょうか？

実装をCodeSandboxに公開しています。

Submitすると内容がアラートに表示されるフォームを作成する

初期値に利用する値ををgithub APIから取得するとします。 axiosとReact Hooksを使うと以下のようになります。

const [data, setData] = useState({ name: "" });

useEffect(() => {
  const getUser = async () => {
    const response = await axios.get("https://api.github.com/users/tagty");
    setData({ name: response.data.name });
  };
  getUser();
}, []);

データを初期値に利用するにはどうすればよいか？

まず、以下のように、初期値を定義します。

const initialValues = { name: data.name };

初期値をFormikに設定するには、initialValuesに初期値を代入します。

<Formik
  enableReinitialize={true}
  initialValues={initialValues}
  onSubmit={onSubmit}
  validationSchema={validationSchema}
  render={({ dirty, isSubmitting, handleReset, values }) => (
      <Form>
        <label htmlFor="name" style={{ display: "block" }}>
          Name
        </label>
        <Field
          type="text"
          name="name"
          placeholder="Enter your name"
          value={values.name}
        />
        <ErrorMessage
          name="name"
          component="div"
          className="input-feedback"
        />
        <button
          type="button"
          className="outline"
          disabled={!dirty || isSubmitting}
          onClick={handleReset}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
  )}
/>

enableReinitialize は initialValues が変更されたときにフォームの値を再設定するか管理するオプションです。 initialValues に遅延処理で取得した値を利用しているので、フォームの初期値を再設定する必要がありました。

まとめ

上記コードより、Formikを使うことによって、以下の3つが一つのコンポーネントで実現できていることがわかりました。

• フォーム外で取得した値のフォームでの利用
• バリデーションとエラーメッセージの管理
• 送信の処理

今回は、Formikを使って、外部APIから取得した値を初期値に設定する方法を説明しました。

さいごに

エムステージでは、エンジニアを募集しています。 興味のある方は こちら から連絡をいただけると幸いです。