名前も知らないSEでしょう

この木なんの木気になる樹

JavaScript

React関連の使い方を復習する/(3) stateとイベントハンドラ

更新日:

React関連の使い方を復習する/(1) create-react-app
React関連の使い方を復習する/(2) prop

前回、reactのprops(+react-bootstrap)を使ってカンバンの画面構成を作成しました。
今回は、stateとイベントハンドラを使って画面を少し動的にしてみましょう。

この記事で触れること

タスクの完了状態を管理して画面に反映する

せっかくTasksコンポーネントの1タスクごとにチェックボックスを置いたので、on/offの切り替えをできるようにしたいですよね。ついでに、チェック済みになったタスクは取り消し線を、全てのタスクがチェック済みになったCardコンポーネントの名前も取り消し線をつけるとわかりやすいですね。
これを実現するために、全てpropsで管理していたデータの一部をstateで管理するように修正していきます。

Tasksコンポーネント

前回作ったTasksコンポーネントは、親のCardコンポーネントから渡されたpropsをそのまま描画に使っていましたが、このままでは画面の変更に対応することができません。
propsは、親コンポーネントから渡される、いわゆる「初期情報」で、stateは自コンポーネントを管理する「状態」です。stateが更新されると、自動的にReactコンポーネントのrender関数が呼び出され、画面が再描画されます。

今回は、 Tasksコンポーネントのインスタンスが作られるときにpropsで渡されたタスク情報を、stateで管理するように変更してみます。
合わせて、チェックボックスをクリックしたときにイベントをハンドリングして、チェックボックスの状態を変更するように処理を追加します。

L8-L15、初期stateを設定する場合はコンストラクタを利用します。es6のclass構文を使わない場合のsetInitialState関数ですね。propsで渡されたtasksをまるっとstateで管理します。合わせて、L38、描画するtasksをpropsからstateに変更していますね。
L39、チェックボックスをクリックしたときのイベントをonClickでハンドリングしています。toggleTask関数を呼び出すわけですが、何もしないと呼び出し先の関数でthisを使うことができないため、bind関数でthisを紐づけます。

ハンドリングするイベントの種類は、ReactのSyntheticEventの項を参照。

L40、isDoneの状態に応じて取り消し線を付与するように修正しています。<del />で取り消し線を付与できるんですね、知らなかった。
L23-L34、toggleTask関数では、クリックされたタスクのisDoneを反転してstateを更新しています。
さらに、親コンポーネントのcompleteCheckを呼び出していますが、これはこの後Cardコンポーネントで定義する関数です。
ピュアなReactを使用している場合は、コンポーネント間の関数呼び出しや状態の受け渡しなど、1つずつ渡していく必要があります。これくらいの単純なものであれば良いですが、コンポーネント間の連携が多くなってくるとなかなか見通しが悪くなりそうに思いますね。
あと、ついでにcomare関数をif-elseから三項演算子に変更してスッキリさせています。

Cardコンポーネント

Tasksコンポーネントだけだと芸がないので、子コンポーネントが全てチェックされたらカードも取り消し線を付与するようにCardコンポーネントを改造します。

L10-L16、コンストラクタで初期stateを設定するのは先ほどと同じです。
カードがもつタスクが全てチェックされているかどうかを確認してstateを設定しています。
L18-L23、先ほどのTasksコンポーネントから呼び出される関数です。コンストラクタと同様、全てのタスクがチェック済みかを確認してstateを更新しています。
L49-L54、Tasksコンポーネントと同様、Cardコンポーネントのstateによって取り消し線を付与するように修正しています。

画面が味気ないので、Laneのステータスに応じて色を付与するようにBootstrapのbsStyleを設定しています。デフォルトのものをそのまま使用しているので、warningとかsuccessとかですけど今回は本質ではないので気にしないことにします。また、カードが増えてくると縦長になってくるので、BootstrapのAccordionコンポーネントを使って開閉できるように修正しています。

Lane

Laneコンポーネントは大きな修正はないですが、CardコンポーネントでLaneのステータスに応じて色を付与するためにlaneIdをpropsに追加しています。

 

画面の確認

今回修正した画面を確認してみます。

少しだけ画面に動きが出てきましたね。
現時点でのソースコードは、Githubに置いておきます。

次回は何をしましょうかね、props-typeとかですかね。
reduxにいく前にもう少しReactの機能を使いたい。ちょっと考えます。

-JavaScript
-,

Copyright© この木なんの木気になる樹 , 2018 AllRights Reserved.