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

off.tokyo｜スキルキャリアもっと輝け

2021.05.26

Reactでselectタグの代わりにドロップダウンを作る方法

https://off.tokyo/blog/react-select-own

htmlのselectタグとoptionタグで、特にoptionタグはブラウザに依存しててcssを適用してリッチなドロップダウンを作るのは結構大変です。 多くの場合、無理やりoptionタグにcssをつけるよりも、独自にコンポーネントを作って、代替することが多いです。 ということで、今日はselectタグを独自コンポーネントに置き換える方法を紹介します。 ドロップダウンメニューコンポーネントの視覚的構造 技術的な話に入る前に、ドロップダウンメニューコンポーネントのビジュアル構造を見て、要件を決めましょう。 &...

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

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

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

Stack Overflow

 

21 Pockets

How to style the option of an html "select" element?

https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element

Here's my HTML: <select id="ddlProducts" name="ddProducts"> <option>Product1 : Electronics </option> <option>Product2 : Sports </option></select>I ...

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コンポーネントの呼び出し元で使えるっていうわけですね。

今日は以上です。