はじめに

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

環境

Visual Studio Code v1.70.1
Node.js v16.13.2
npm v8.11.0

React環境構築

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

1 .create-react-appを実行

npx create-react-app my-app

2 .作成されたフォルダmy-appへ移動

cd my-app

3 .プロジェクトを実行

npm start

無事に起動することが出来ました！
今回はこのプロジェクトをベースに簡単な入力フォームを作っていきたいと思います。

入力フォーム作成

本題の入力フォームの作成を行います。
今回は、以下のような簡単な入力フォームを作成します。

1 . まず、my-app 内の、src/app.js のdivタグより内側を削除します。

削除前
削除後

2 .src配下に、Form.jsxファイルを作成し、以下内容を実装します。

const Form = () => {

};

export default Form;

src/App.js に作成したFormを入れ込む内容を実装します。

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 も併せて追加します。

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;

Form.css

.container {
  margin: 40px;
}

.spacer {
  margin-top: 10px;
}

button {
  margin-left: 170px;
}

不格好ですが、大枠の形は作ることが出来ました！

5 .市区町村、都道府県のプルダウンが空の状態なので、Propsでデータを渡して表示できるようにします。

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;

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;

こんな感じでプロダウンも表示することが出来ました。
一旦、今回はここまでで。

最後に

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