LoginSignup
1
0

More than 3 years have passed since last update.

続き:bubbleのページ間で値をキャッチボールする方法

Last updated at Posted at 2021-01-24

https://qiita.com/yoshio_y/private/419e0bc1c339860cd409
の続きとして下記部分ご説明していきます。

解説ページの「次の問題へ」ボタンをクリックすると
問題ページへ遷移し問題番号が増える(1→2など)

スクリーンショット 2021-01-24 14.50.29.png

index(問題ページ)からanswer_page(問題解説ページ)に「第n問」の情報を送り、
answer_pageで「第n問の解説」として表示させる。
までは前回の記事でできたので、
今度はanswer_pageの「次の問題へ」Buttonを押す→問題ページの「第n問」の数字が
カウントアップ「n+1」してあげるようにしましょう。

answer_pageのWorkFlowの設定は下記のようにします。

スクリーンショット 2021-01-24 14.59.17.png

まずは「次の問題へ」Buttonを押すと、index(問題ページ)に遷移する設定をします。
次に、「Send more parameters to the page」のタブにチェックを入れ、
「Key」に「no」を、「=」の先のValueには「Text A’s QuizNumber」を入力します。

これでanswer_pageの処理は完了です。
(前回の記事の内容読んでいただければ、どういう処理してるか説明しているので割愛します)

最後に、index(問題ページ)で「第n問」の問題番号を「n+1」しましょう。

indexページに遷移したとき(ページが読み込まれたとき)の処理を設定します。
スクリーンショット 2021-01-24 15.59.07.png
内容的には前回と一緒です。
処理としては、このページが表示された際に
「Text A」の「QuizNumber」というStateに、前のページから送られた
「no」という「Key」の中の数字を入れてあげます。
一つ付け加えると、初回のページロード時に
この処理はできないので(試してないですがエラー吐くかもなので)
「Only when」のところに「Get no from page URL is not empty」としてます。
内容としては、
遷移前のページから送られて来た「no」が、無い状態でないときこの処理をする
といった感じでしょうか。

ですが、このままでは「n+1」にならないので次の処理を設定します。
スクリーンショット 2021-01-24 16.08.24.png

「Text A」のstate「quiz number」のvalueに「+1」します。

これでこのページがロードされるたびに「n+1」されていきます。
初回「第1問」の場合は「0+1」して表示するのでDefault valueを「0」としてます。
スクリーンショット 2021-01-24 10.22.11.png

以上、プレビューページで確認すると動きがカッコ悪いですが
もっとスマートな設定方法あればご教授ください!!!!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0