semantic UI(React)のDropdownのplaceholderについての備忘録

こんにちは。fujjimaです。

今回はSemantic UIについて、タイトル通りの備忘録です。

細かい部分については、以下の記事を参照してみてください。

↓　Semantic UIは何者か？

Semantic UIの中に、ドロップダウンを簡単に作るための「Dropdown」コンポーネントがあります。

Dropdownコンポーネントには、入力に関するヒントを表示するための「placeholder」オプションが用意されていますが、こいつがどのタイミングで表示されるかがよく分からなかったため、調べました。

結論からいうと、placeholderが表示されるタイミングは下記の通りです。

• 「value」属性の値がnull or undifinedの時。

というわけで下記サイトで検証します。

react.semantic-ui.com

1.

下図のプルダウン中に「Select Friend」と表示されているが、コード内の「placeholder」で指定されていることが分かる。

const DropdownExampleSelection = () => (
  <Dropdown
    placeholder='Select Friend'
    fluid
    selection
    options={friendOptions}
  />
)

2.

options（プルダウンをクリックした際に表示されるの選択肢を指定できる属性）に設定されたオブジェクトの中で一つ、「value」をnullにしておく。

↓　ここでは、2個目のオブジェクトのvalueをnullにしてみました。

const friendOptions = [
  {
    key: 'Matt',
    text: 'Matt',
    value: 'Matt',
    image: { avatar: true, src: '/images/avatar/small/matt.jpg' },
  },
  {
    key: 'Justen Kitsune',
    text: 'Justen Kitsune',
    value: null,
    image: { avatar: true, src: '/images/avatar/small/justen.jpg' },
  },
]

選択肢が2つになっていることが分かる。

3.

valueをnullに設定した「Justen Kitsune」を選択してみると、
placeholderで設定した「Select Friend」が表示されていることが分かる。（ここめんどうなので画像略）

使い道としては、以下のようなものが考えられるかなと思います。

選択肢の中に{ value: null,  text: "xxxx" }の組み合わせを仕込んでおいて、valueがnullの場合に表示させたい文字列やらがある時に、placeholderにも同じように「"xxxx"」を指定しておけば、それを初期表示できる感じですかね。

すごいマニアックな内容ですが、地味に詰まったため備忘録として残しました。