はじめに
普段、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を入れ込む内容を実装します。
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 も併せて追加します。
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;
.container {
margin: 40px;
}
.spacer {
margin-top: 10px;
}
button {
margin-left: 170px;
}
不格好ですが、大枠の形は作ることが出来ました！
5 .市区町村、都道府県のプルダウンが空の状態なので、Propsでデータを渡して表示できるようにします。
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;
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全然使ってないので、学習して使いこなせるようになりたいです。