[Golang/React]~MovieApp3: Formを作成しよう!~

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

今回は、Formの作成方法について紹介します。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

Movieデータに付随してついてくるGeres(ジャンル)データを処理しました

事前準備

フォルダ/ファイル

Movie Formの作成

Movie情報を追加するための、Formを作成しましょう。

EditMovieコンポーネント

コンポーネントを実装します。

ルート

ルートを追加します。

検証

下記のコマンドで、Dockerコンテナを立ち上げてください。

ブラウザから「http://localhost:3000/」にアクセスして開発画面を表示し、「Add Movie」を押してみましょう。

Formの完成

EditMovieコンポーネントにForm要素を実装します。

CSSも追加します。

Formに値を反映する

先ほど実装したFormで、Movieデータを新規に追加します。加えて、Movieデータを“Edit(編集)”するときにも使いたいと思います。

各要素には、「value」要素をセットしているので、movie変数にデータが入っていれば、値が反映されるように実装しました。

サンプルとして、Movieデータを手動で追加してみましょう。

useEffectを使用すると、ページを開いたタイミングでMovieデータを保存することができます。

ブラウザから「http://localhost:3000/admin/add」へアクセスし、SampleDataが表示されるか確認しましょう。

Submit処理

FormからAPIへSubmitする処理を実装しましょう。

Submit関数

最初にSubmit関数を定義し、formにセットしましょう。

Changeイベント

formに入力された値をStateにセットします。

これで、Formの値を変更後、リアルタイムにStateへ値が反映されます。

Input要素のコンポーネント化

Input要素をコンポーネント化して、コードを最適化しましょう。

Inputコンポーネント

EditMovieコンポーネントに実装したInput要素で共通する部分を、Inputコンポーネントにします。

コンポーネントの入れ替え

先ほど実装したInputコンポーネントを使ってみましょう。

検証

Input要素にデータを入力して、入れ替え前と同じように使えるか確認してみましょう。

TextArea要素のコンポーネント化

Inputと同様に、TextAreaもコンポーネント化しましょう。

TextAreaコンポーネント

コンポーネントの入れ替え

検証

Select要素のコンポーネント化

Selectもコンポーネント化します。

Selectコンポーネント

コンポーネントの入れ替え

検証

次回

次回は、Form処理(取得・保存・更新)を実装します

記事まとめ

参考書籍

ソースコード

App.tsx

EditMovie.ts

EditMovie.css

Input.tsx

TextArea.tsx

Select.tsx

コメントを残す