javascript react プログラミング 開発ノウハウ

Material-UIを使って検索バーを実装する

投稿日:


 

こんにちは、mabuiです。
今回は以前サンプルを作った時にも使用した、
Reactで作ったサンプルにMaterial-UIを適用する
Material-UIを使って、検索バーの実装を紹介します。
 
Material-UIの公式リファレンスではコンポーネントのサンプルがいくつも紹介されていて、その中のapp barをベースにした実装をしていきます。
 
扱うものはこういった形のサーチバーで、カーソルを合わせると伸縮するアクションをします。

app barのリファレンスはこちら

 

ソースコード

まずはコンポーネントのソースコードです。

 
タイトルはコンポーネントを呼び出す時に<TitleAppBar title=‘Material-UI’ />
こういった形で変更できるようにしています。
呼び出し時に指定した変数はコンポーネント内にpropsとして渡ります。
const { classes, title, search } = props;
この部分でpropsから値を取り出して使用しています。
 
<Search search={search} />
サーチバー自体のコンポーネントはこの一行で呼び出している<Search/>です。
引数に渡しているsearchはActionsのメソッドで後ほど解説します。
searchのactionをpropsに渡しているのはcontainerで、下記の記事で解説しています。
Reactのみで実装したサンプルに、Reduxを導入する
 

次はサーチバーのコンポーネントについて見ていきます。

functionとstyles共にほぼ下記のリファレンス通りですが、
App Bar React component - Material-UI
<Input/>コンポーネントのonChangeプロパティを使用してsearchアクションに値を渡すところを追加しました。

onChangeを使用することで、検索バー内の値が変更時にevent.target.valueを参照することでリアルタイムに値を受け取れます。
inputコンポーネントのapiリファレンスはこちら
 

最後にsearchアクションです。

今回はシンプルにnameで前方一致検索を実行しています。
returnでreducersに値を返してstoreを更新し、表示側でresultDataを参照すればリアルタイム検索の完成です。
 

-javascript, react, プログラミング, 開発ノウハウ
-, , , ,

Copyright© mabui.org , 2018 All Rights Reserved Powered by STINGER.