以下全て
React 公式チュートリアル
「 https://reactjs.org/tutorial/tutorial.html 」
を参考にさせていただいております。
前回記事
「React㉙ Setting button to review history」
の続きです。
本記事の目的
過去の任意の打ち手に戻れる機能(ボタン)を作成する。
後編
前回は祖父母コンポーネントGameのstate(プロパティ)のオブジェクト内に新たにstepNumberプロパティを設置しました。
(101行目)
<button>タグがクリックされるとonClickイベントにより、関数jumpToが呼ばれ、
stepNumberプロパティとxIsNextプロパティが合わせて.setStateメソッドを用いて更新されました。
(stateの更新)
Reactでは .setStateが呼ばれると必ずrenderメソッドが再度呼ばれ、更新後のstateを用いたJSXで画面が再レンダリングされます。
renderメソッドが再度呼ばれ更新後のstateを用いたJSXで画面が再レンダリングされるときに
押されたbutttonに対応した打ち手の履歴(過去の画面)に戻った画面を表示しなければいけません。
ex
例えば
3. のボタンが押されたら#2の履歴画面を表示。
=
配列history [ {square : Array(9) } , {square : Array(9)} , {square : Array(9)} ・・・] におけるindex番号2
の要素 ( stepNumber= 2 )
を用いて9マスの○X状態をレンダリングします。
(過去の9マス状態を表示。)
その時にstateで設定したsetNumberプロパティを用います。
renderメソッド内の記述を修正。
“
引用
we will modify the Game component’s
rendermethod from always rendering the last move to rendering the currently selected move according tostepNumber
出典 : https://reactjs.org/tutorial/tutorial.html#implementing-time-travel
”
↑の記述のように修正します。
↓134行目
これで配列hitoryの要素のうち、
stepNumber(=配列historyのindex番号)で指定されたある過去の打ち手の9マスの要素
がcurrentへと入れられ、レンダリングすることができます。
ではその過去の状態を表示しているときに
新たにマスがクリックされ、新しく○Xがつけられたら？
handleclick関数を変更する。
handleclick関数
・・・子コンポーネント側から祖父母コンポーネントのstateを更新できるように
祖父母コンポーネントGame→親コンポーネントBoard→子コンポーネントSquareへとpropsにのせて渡して使わせる関数。
現在、子コンポーネントsquare(1マス分)をクリックするとpropsによって子コンポーネントまで渡された
祖父母コンポーネントGame内のhandleclickメソッドが呼び出される。
→handleclickメソッド内のsetStateでstateを更新。
ここからが本題
ある過去の任意の打ち手の9マスを表示している時に
新しく子コンポーネントsquare(1マス)がクリックされ、新しい○Xがつけられたら
その時点(今表示している過去の任意の9マス)でのstepNumberに＋１ながらコピーを作り、新たにhistory配列とします。
const history = this.state.history.slice(0, this.state.stepNumber + 1);
そしてその↑history配列の要素の数を新たにstateのオブジェクトのstepNumberプロパティ とします。
this.setState({
history: history.concat([{
squares: squares,
}]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext,
});
祖父母コンポーネントGame内handleClickメソッド
108行目と119行目
これで
ある任意の過去の打ち手の状態(過去の9マス)を表示しているときに
新たにマスがクリックされ、新しく○Xがつけられたら
その過去の打ち手の状態から再び新しく○Xが記録され始めます。
↓３,Go to move #2 を押し、過去の9マス状態#2に戻る
↓ 過去の9マス状態#2から新たに○Xをつけ、ゲーム再開。
といった流れでした！！
以上でReactのチュートリアルは一通り終わりました！！
続いて次回からReduxのチュートリアルをやりながら知見をまとめていこうと思います！！