[React]~Ambassador画面10:プロダクトの選択とLink生成機能の実装~

こんにちは、KOUKIです。

Reactで画面開発をハンズオン形式で紹介しています。

今回は、プロダクトの選択とLink生成機能の実装を行います。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

Lazy Loading機能の実装を行いました

プロダクトの選択

Select関数の実装

プロダクトを選択する関数を実装します。

これまでsomeメソッドを使ったことはなかったのですが、結構使えそうですね。

スタイル

App.cssにプロダクトが選択された時のスタイリングを追加します。

これを、HTMLに読み込ませます。

確認

ページ上のプロダクトを適当に選択すると、緑の枠線で囲まれます。

Linkの生成

プロダクトを選択し、チェックアウトするための、Link作成処理の実装に入ります。

Generate Linkボタン

プロダクトが選択されたら、Generate Linkボタンを表示します。

generate関数の実装

generate関数を実装しましょう。

これで、プロダクトを選択後、「Generate Link」ボタンを押下することで、Linkが生成されるようになります。

確認

「http://localhost:4000/stats」へアクセスすると、一覧がみれます。

ログアウトすると、Linkは生成できません。

おわりに

Ambassador画面の実装は、本記事で終了です。お疲れ様でした!

Reactまとめ

参考書籍


ソースコード

Products.tsx

App.css

コメントを残す