【React】入力フォームを作ってみた

# はじめに
普段、HTML+JSでWeb画面を作っているのですが、
この度、React学習ついでに入力フォームを作ってみたので、その際のメモになります。

# 環境
* Visual Studio Code v1.70.1
* Node.js v16.13.2
* npm v8.11.0

# React環境構築
Reactの環境構築は、"create-react-app"を使用します。
以下の公式を参考に実施しました。

https://ja.reactjs.org/docs/create-a-new-react-app.html

1 .create-react-appを実行
```
npx create-react-app my-app
```
2 .作成されたフォルダmy-appへ移動
```
cd my-app
```
3 .プロジェクトを実行
```
npm start
```
無事に起動することが出来ました！
今回はこのプロジェクトをベースに簡単な入力フォームを作っていきたいと思います。
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/742bfdd4-08e5-b603-1416-d6fa6092d171.jpeg)

# 入力フォーム作成
本題の入力フォームの作成を行います。
今回は、以下のような簡単な入力フォームを作成します。
![WS000004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/9d0d5d0f-4100-728e-4ae1-b3891c33d678.jpeg)
1 . まず、my-app 内の、src/app.js のdivタグより内側を削除します。
* 削除前
![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/c6ea704e-62e8-2343-3f50-c4c8d0ab0415.jpeg)

* 削除後
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/af23996a-27d4-612e-fdc8-f449f19dd91d.jpeg)

2 .src配下に、Form.jsxファイルを作成し、以下内容を実装します。
```JavaScript
const Form = () => {

};

export default Form;
```
![WS000008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/3a84d1ec-1165-f2c7-ffff-877769b4472b.jpeg)

3. src/App.js に作成したFormを入れ込む内容を実装します。
```jsx:App.js
import './App.css';
import './Form'
import Form from './Form';

function App() {
  return (
    <div>
      <Form />
    </div>
  );
}

export default App;
```

4 .作成した src/Form.jsx にフォームの形を作成していきます。
スタイルシートのファイル src/Form.css も併せて追加します。
```jsx:Form.jsx
import React from "react";
import "./Form.css";

const Form = (props) => {
  return (
    <div className="container">
      <b>{props.title}</b>
      <hr />
      <div>
        <label>名前：</label>
        <input type="text" />
      </div>
      <div className="spacer" />
      <div>
        <label>年齢：</label>
        <input type="text" />
      </div>
      <div className="spacer" />
      <div>
        <label>都道府県：</label>
        <select></select>
      </div>
      <div className="spacer" />
      <div>
        <label>市区町村：</label>
        <select></select>
      </div>
      <div className="spacer" />
      <button>登録</button>
    </div>
  );
};

export default Form;
```
```css:Form.css
.container {
  margin: 40px;
}

.spacer {
  margin-top: 10px;
}

button {
  margin-left: 170px;
}
```
不格好ですが、大枠の形は作ることが出来ました！
![WS000009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/1edb7893-dab1-40d6-f65a-e2edb3062816.jpeg)

5 .市区町村、都道府県のプルダウンが空の状態なので、Propsでデータを渡して表示できるようにします。
```jsx:App.js
import "./App.css";
import Form from "./Form";

function App() {
  const dataList = {
    prefectures: [
      {
        id: 1,
        name: "東京都",
      },
      {
        id: 2,
        name: "神奈川県",
      },
      {
        id: 3,
        name: "千葉県",
      },
      {
        id: 3,
        name: "埼玉県",
      },
    ],
    municipalities: [
      {
        id: 1,
        prefectureId: 1,
        name: "千代田区",
      },
      {
        id: 2,
        prefectureId: 1,
        name: "世田谷区",
      },
      {
        id: 1,
        prefectureId: 1,
        name: "港区",
      },
      {
        id: 1,
        prefectureId: 1,
        name: "品川区",
      },
    ],
  };
  const datas = JSON.stringify(dataList);
  return (
    <div>
      <Form title={"サンプルフォーム"} data={datas} />
    </div>
  );
}

export default App;
```

```jsx:Form.jsx
import React from "react";
import "./Form.css";

const Form = (props) => {
  const data = JSON.parse(props.data);
  const mPrefectures = Object.keys(data.prefectures).map(function (key) {
    return data.prefectures[key];
  });
  const mMunicipalities = Object.keys(data.municipalities).map(function (key) {
    return data.municipalities[key];
  });

  const handleChange = (e) => {};

  return (
    <div className="container">
      <b>{props.title}</b>
      <hr />
      <div>
        <label>名前：</label>
        <input type="text" />
      </div>
      <div className="spacer" />
      <div>
        <label>年齢：</label>
        <input type="text" />
      </div>
      <div className="spacer" />
      <div>
        <label>都道府県：</label>
        <select onChange={(e) => handleChange(e)}>
          {mPrefectures.map((item) => (
            <option value={item.id}>{item.name}</option>
          ))}
        </select>
      </div>
      <div className="spacer" />
      <div>
        <label>市区町村：</label>
        <select onChange={(e) => handleChange(e)}>
          {mMunicipalities.map((item) => (
            <option value={item.id}>{item.name}</option>
          ))}
        </select>
      </div>
      <div className="spacer" />
      <button>登録</button>
    </div>
  );
};

export default Form;
```
こんな感じでプロダウンも表示することが出来ました。
一旦、今回はここまでで。
![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/99235266-c0f6-547c-32c0-ada677d16246.jpeg)

# 最後に
今回は、Reactで簡単な入力フォーム画面を作ってみました。
環境構築から一通り、流れをつかむことが出来たので良かったです。
※プルダウンリストの内容をPropsでコンポーネントへ渡して、表示するところが思いの外ハマってしまいました。
次回以降は、MUIのライブラリを使って、もっとちゃんとした入力フォームを作ってみたいと思います。
あと、今回React Hooks全然使ってないので、学習して使いこなせるようになりたいです。