React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

JavaScript React TypeScript

ReactとTypescriptでselectタグを独自コンポーネントに変える方法

0
0

この前『Reactでselectタグの代わりにドロップダウンを作る方法』というのを書いたのだが、

 

 

 

今回はTypeScriptを使ってより簡潔に記事を書いてみたいと思います。

 

前回も言ったように、HTMLのselectタグではoptionタグをデザインするのは結構だるいです。

 

スタックオーバーフローでも、こういう風にベストアンサーされてますよね。

 

 

 

There are only a few style attributes that can be applied to an<option>element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a<select>but are actually composed of regular HTML elements thatCANbe styled.

 

和訳するとこんな感じ。

 

<option>要素に適用可能なスタイル属性は限られています。

これは、この種の要素が「置き換えられた要素」の一例だからです。これらはOSに依存しており、HTML/ブラウザの一部ではありません。CSSによるスタイリングもできません。

<select>のように見えても、実際にはスタイリングが可能な通常のHTML要素で構成されている置換プラグイン/ライブラリもあります。

 

なので、bbuttonとかを使って機能を作って、それにデザインを装飾するわけです。

 

それを紹介したのが前回の記事でした。

 

でも、よく考えてみたら、一々optionのボタンをbuttonタグで実装するのは美しくないかなって思いました。

 

なので、ulとliでこの件を実装してみたいと思います、それも、今回はTypeScriptでやります。

 

実装はこんな感じです。

 

見た感じ分かりますよね?

 

Selectコンポーネントの引数には、初期値であると、optionに相当するoptionPropが渡されていて、

 

Selectコンポーネント内で値が選択されると、onChange={(value) => someFunc(value)に値が戻ってきて、

 

Selectコンポーネントを呼び出した親コンポーネント内の関数を実行できるので、汎用性が生まれています。

 

これで、ユーザー登録フォームであろうが、住所登録フォームであろうが、optionに渡す配列だけ変えれば、

 

そのセレクト結果の値は、Selectコンポーネントの呼び出し元で使えるっていうわけですね。

 

今日は以上です。

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-JavaScript, React, TypeScript

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.