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

  1-5 日付を扱うフォームを実装しよう

このパートでは、日付のフォームを実装して誕生日を入力できるようにします。

本パートの目標物



目標物を作成するまでの流れ


  1. UI を作成しよう
  2. redux で管理しよう

先ほどと同じ流れで実装していきます。

では実際に進めていきましょう。

1. UI を作成しよう


日付を扱う input はいくつか選択肢があります。今回は HTML の標準の input で日付を扱うことにします。こうすることでスマホだとそれ専用のネイティブの UI になるのでユーザーが入力しやすくなります。src/components/Basic.tsxを以下のコードを追加してください。

typedateとすることでネイティブの date input を使うことができます。また、以下のコードでラベルを縮小しています。

input のラベルが縮んでいないと、ラベルがフォームに被ってしまうため指定しています。

2. reudx で管理しよう


続いて redux で管理できるようにします。勘のいい方はお気づきかもしれませんが、これまた 2 行追加するだけです。src/components/Basic.tsxに以下のコードを追加してください。

はい、これで完成です。

動作確認


冒頭に示した通りに動いていたら完成です。

また、Redux DevTools で 誕生日を入力したときに、以下のように状態が更新されていることが確認できたら ok です。

このパートでは日付の input について学びました。日付も頻出の入力(ちなみに教材の後半でまた登場します)なのでこの機会にマスターしましょう。

議論

0 質問

このコースの評価は?