Reactのフォーム実装でFormikを導入する(基礎編)

自分の備忘録かつ、formikを試してみようかと検討してる人向けに、Formikの実装手順をメモしたいと思います。

## Formikとは
ReactでFormを実装しようとすると冗長になりがちだと思います。(useStateを使ったりして実装することも可能ですが、かなり面倒かつ、見通しが悪い)

そんな面倒なFormの実装を楽にしてくれるライブラリがFormikです。

公式ドキュメントを読むと、Formikの特徴として以下が挙げられています。

>1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission

formの値を管理や、エラーハンドリングやバリデーションの設定、submitの処理を簡潔に書くことを助けてくれます。

[公式ドキュメント](https://formik.org/docs/overview)

## 実装してみる

公式に従って、formikをインストールします。

```
npm install formik --save
```

formikを使って実装する前に素のHTMLでformを書いてみます。

```react

import React from "react";

const UserForm = () => {
  return(
    <>
      <h2>Formik Test</h2>
      <form action="">
        <div>
          <label htmlFor="name">お名前</label>
          <input type="text" id="name" name="name"/>
        </div>
        <div>
          <label htmlFor="email">メール</label>
          <input type="text" id="email" name="email"/>
        </div>
        <div>
          <label htmlFor="hobby">趣味</label>
          <input type="text" id="hobby" name="hobby"/>
        </div>
        <button type="submit">Click</button>
      </form>   
    </>
  )
}

export default UserForm;
```

では、formikを使用してinputフィールドの各valueを管理できるようにしましょう。


#### ① useFormikをimportする

```react
import React from "react";
import {useFormik} from "formik";
```

#### ②　各フィールドの初期値を設定する

useFormik関数のオブジェクトに、`initialVales`を設定することで、初期値を定義することができます。

```react
const formik = useFormik({
  initialValues: {
    name: "",
    email: "",
    hobby: ""
  }
})
```
`initialValues`の`key名`は、formの`name属性`になります。
各フィールドのvalueは、以下のように、`formik.values.{各name属性}`で取ることができます。

```react
<input 
  type="text" 
  id="name" 
  name="name" 
  value={formik.values.name} // 追記
/>
```

#### ③ 各フィールドにonChange属性を設定

フォームの状態を追跡するために、`onChange`属性にuseFormikの`handleChange`を指定します。

```react
<input 
  type="text" 
  id="name" 
  name="name" 
  value={formik.values.name} 
  onChange={formik.handleChange} // 追記
/>
```
これで入力値が`name`属性をkeyとしたデータを入れることが出来るようになりました。

#### ④ submit時の設定
formタグの`onSubmit属性`に`handleSubmit`を設定します。(buttonタグのtypeは、`submit`にしておくこと)

```react
<form action="" onSubmit={formik.handleSubmit}>
```

```react
<button type="submit">Click</button>
```

最後に、`useFormik`関数のオブジェクトに、`onSubmit`メソッドを追記してあげます。

```react
const UserForm = () => {

  const formik = useFormik({
    initialValues: {
      name: "ほげ",
      email: "",
      hobby: ""
    },
    onSubmit: (val) => {
      console.log("値は取れてますか?", val)
    }
  })
```

実際にブラウザで確認すると、値が格納されてることが確認できます。
![スクリーンショット 2020-12-29 9.46.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33632/13d22689-9929-8721-c560-7d7100ef76f5.png)

## おわりに

ソースの全体像は以下の通りです。

```react
import React from "react";
import { useFormik } from "formik";

const UserForm = () => {

  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      hobby: ""
    },
    onSubmit: (val) => {
      console.log("値は取れてますか?",val)
    }
  })

  return(
    <>
      <h2>Formik Test</h2>
  <form action="" onSubmit={formik.handleSubmit}>
        <div>
          <label htmlFor="name">お名前</label>
          <input 
            type="text" 
            id="name" 
            name="name" 
            value={formik.values.name} 
            onChange={formik.handleChange}
          />
        </div>
        <div>
          <label htmlFor="email">メール</label>
          <input 
            type="text" 
            id="email" 
            name="email" 
            value={formik.values.email} 
            onChange={formik.handleChange}
          />
        </div>
        <div>
          <label htmlFor="hobby">趣味</label>
          <input 
            type="text" 
            id="hobby" 
            name="hobby" 
            value={formik.values.hobby} 
            onChange={formik.handleChange}
          />        
        </div>
        <button type="submit">Click</button>
      </form>   
    </>
  )
}

export default UserForm;
```
以上、formikの導入手順でした。次はyupを使ったバリデーションについても書こうと思います。