[React]~Ambassador画面7:検索処理を実装しよう!~

こんにちは、KOUKIです。

Reactで画面開発を行なっています。

今回は、検索機能の実装を行いましょう。

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

前回

Productページを実装しました。

事前準備

ファイル

検索機能

Product名で検索できる機能を実装します。

検索フォームの作成

前回作成したProductページに、検索フォームを追加します。

画面を表示してみましょう。

filterモデルの作成

以前、以下の記事でSearch APIを実装しました。

このAPIでは、URLの末尾に検索用のキー「q=文字列」を指定してリクエストを送り、フィルタリングした商品を受け取ることができます。

filterモデルは、このqを型として表現します。

この型は、以下のように使用します。

Search APIへリクエストを送る

まず、Products.tsxにsearchメソッドを実装します。

「setFilters」は、useStateで作成した状態管理用の関数です。filtersの状態を変更する役割を持ちます

これは、検索フォームに文字列が入力された時に発火するようにします。

次に、ProductsFrontend/Backendのコードに、queryを設定するコードを実装します。

Frontend側は、一度全てのプロダクトコードを取得してから、Filterをかけます。

バックエンド側は、「http://localhost:8000/api/ambassador/products/backend?q=tkc」へリクエストを送ればOKなので、フロントエンド側よりシンプルです。

検証

OKですね。

次回

次回は、ソート機能の実装をしましょう

Reactまとめ

学習

参考書籍


ソースコード

Products.tsx

ProductsFrontend.tsx

ProductsBackend.tsx

filters.ts

コメントを残す