前のパートに戻る 完了して次のパートへ  

  2-7 「ゴルフ場を検索する」ボタンを作ろう

このパートのゴール


  • SelectBox で選択肢に変更があった場合、onChange イベントで state を変更する
  • 「ゴルフ場を検索する」ボタンを押して、API のモックの結果が返ってくることを Console で確認する

state の初期値を設定し、onChange イベントが発生した際に state の内容を変更させよう


現在、SelectBox の値を変更しても API にパラメーターとして送ることができません。 そこで、今回は state を定義し、SelectBox の内容に変更があった場合にパラメータを受け取って API に送れるように実装します。 コードを以下のように書き換えてください。

search-golf-app/src/components/Home.jsx

ブラウザ画面を表示して、右クリック → 検証 → Console を見てみましょう

このまま日付や移動時間を変えてみましょう。Console に変更した日付や移動時間が state として表示されるはずです。

これでこのコンポーネントが表示されたときの初期値を設定できました。

コードの解説をしていきます。

以下のコードで、date-fnsからaddDaysという関数を import しています。

この関数は、フォームにある「プレー日」を本日の日付から 14 日後の日付に初期設定するために使用します。(本日の日付だとゴルフ場の取得件数が少なくなってしまうためです。)

こちらのコードで date, budget, departure, duration の state の初期値を定義します。ここで定義したものが、最初に画面を表示したときに選択される値になります。 departure は 1 になっていますが、東京駅 の value の値です。1 を渡すと東京駅、2 を渡すと横浜駅になります。

state についての説明は、公式ドキュメントに詳しく載っているので参照してください。

前回 Today だったところで、this.state.date で state の値を selected に渡しています。

最初は初期値に設定した今日から 14 日後の日付が入り、カレンダーを変更する度に新しい日付がここに入ってきます。

API にパラメータを送る際にこの state の中身をみて送ることになります。

2 行目は、onChange イベントが発生した場合 e(イベントオブジェクト)を date に setState してね、という意味です。 以下の記事になぜアロー関数を使用するのか?など詳しく載っていたのでぜひ参考にしてください。

参考)なぜ React ではアロー関数を使うのか

「ゴルフ場を検索する」ボタンを押して Submit できるようにする


現在「ゴルフ場を検索する」ボタンを押しても何も反応がありません。 今回は、「ゴルフ場を検索する」ボタンを押して API のモックの結果が返ってきたことを console で確認できるところまでを実装します。

まずは簡単に HTTP 通信ができるようになるaxiosというライブラリを使用するのでインストールしましょう。

❯ npm install axios

search-golf-app/src/components/Home.jsx

この状態で、「ゴルフ場を検索する」を押してみましょう。 Console をみると、API の JSON の内容が返ってきました! 

コードの解説をします。

先ほどインストールしたライブラリを import します。

onFormSubmit という関数を定義しました。

form に標準で用意されている onSubmit 関数に、私たちが作成した onFormSubmit という関数を定義しています。 submit ボタンを押下したときに、onFormSubmit 関数が実行されるようになります。

実装はここまでです。お疲れ様でした!

最終的なHome.jsxは以下です。不要な console.log は削除しています。

お疲れさまでした。

議論

0 質問

このコースの評価は?