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

Reactのサンプルに、画面表示を変更するボタンを取り付けてみる

投稿日:

 

こんにちは、mabuiです。
前回作成した仮想通貨銘柄の一覧表示サンプルに
画面表示を変更するボタンを取り付けて、
状態を更新して画面をレンダリングし直す、よりreactらしいコードにしていきます。

 
 

動作イメージ

 

名前、金額、時価総額、24時間出来高でソートするボタンと
金額の表示をJPY, USDで変換するボタンを作成しました。
金額変換のボタンはボタン名の表示も切り替わります。

 
 

コード紹介

change_state_only_react.js

 

index.js

 

コンポーネントを切り出した

今回のコードでは、ReactDOM.render()を実行するルートのindex.jsファイルと、
React.render()を実行するコンポーネントのファイルを切り出してみました。
今後開発する上で、レンダリングするコンポーネントの切り替えをやりやすくするためです。
開発中は下記のようにindex.jsで表示するコンポーネントをコメントアウトで切り替えています。

 
 

表示している情報の持ち方

画面にはstate.jsxListを表示していて、ボタンを押すごとに
この情報が全て更新される作りになっています。
外部apiで取得したコインの情報をstate.listに入れて、
convertJsxメソッドでJSXに変換してstate.jsxListを更新します。
更新前にcreateHeaderメソッドでヘッダーを作成し、jsxListの先頭に詰めています。

 
 

項目ごとにソートするボタンの実装

createHeader内でconstで定義している定数がそれぞれのボタンになります。

 

ソート用のメソッドはそれぞれsortConditionメソッドで条件ごとにソートされ、
ヘッダーも含め表示用のjsxListに詰めて、stateを更新して画面が再度レンダリングされます。

 
 

金額の表示をJPY, USDに変換するボタンの実装

changeDisplayメソッドでdisplayの情報を切り替えて、stateを更新しています。
それに合わせてconvertJsxメソッドにdisplayの情報を渡してコインの表示金額情報を切り替えています。

 

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

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