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

  1-4 Radio ボタンのフォームを作成しよう

このパートでは、性別を Radio ボタンで選択できるように実装していきます。

本パートの目標物


このパートでは以下のような Radio ボタンで入力できる性別の項目を実装していきます。

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


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

先ほどのパート同様に UI を作成してそこに store を接続していきます。

1. UI を作成しよう


このパートでは、Radioを使っていくので公式ドキュメントをまずは読んでみてください。

では、早速実装していきましょう。src/components/Basic.tsxを編集していきます。

いきなりたくさんのコンポーネントが出てきましたが、これは material-ui の都合でたくさん登場しているだけと思って大丈夫です。筆者も実装するときはサンプルコードを見ながら組み立てていて完全にはそれぞれの役割を理解しているわけではありません。カスタマイズするときなど必要がでてきたときに詳しく勉強するのがいいでしょう。

ちなみに、FormControlは様々なフォームに共通なフォーカスなどでのスタイリングやエラーメッセージのハンドリングなどを行なっているコンポーネントです。FormLabelは全体のラベルで、RadioGroupRadio全体の状態やイベントハンドラを管理しているコンポーネントです。Radioが丸のラジオそのもので、FormControlLabelが個々のフォームのラベルを管理しているものです。

ここまでの実装でラジオを表示することができました。

ラベルには先ほど定義したPROFILE.GENDERを使っています。

FormControlLabelvalueとして性別を渡しておくことでよしなに入力をハンドリングしてくれます。

2. redux で管理できるようにしよう


続いて redux で管理できるようにしていきましょう。といっても先ほどのコンポーネントに 2 行追加するだけです。src/components/Basic.tsxを以下のように編集してください。

RadioGroupが状態の管理を担っているのでこれだけで実装は完了です。ハンドラーや接続の部分は先ほどの章で実装しておいたのでこんなにも簡単に実装できてしまいます。

動作確認


冒頭で示したように動いていたら完成です。

また、Redux DevTools で Radio ボタンを選択したときに、以下のように状態が更新されていることが確認できたら ok です。

このパートでは、Radio ボタンの実装について学びました。テキストに比べれば少ないですが、それでも過半数ぐらいのフォームには実装されている UI ですのでこの機会にぜひマスターしください。

議論

0 質問

このコースの評価は?