私は<label>
がUI Reactを使用して、ドロップダウンメニューのために挿入されたセマンティックUIから以下のドロップダウンを再現したいと思います: Semantic UI + React Dropdownコンポーネントにlabel要素を挿入する方法は?
(https://semantic-ui.com/collections/form.html#dropdown)
これは私が私が反応たい値下げです作成するアプリケーション:
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
私はセマンティックUIのReact UI実装でこれを達成するのに苦労しています。それは、これが明確に表示されていることが非常に重要です
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
:
私の現在の試みはこれです。私は、ユーザーリサーチで、プレースホルダが質問のプロンプトだけを混乱させていることを発見しました。
ラベルを追加するにはdocumentationがありますが、ドロップダウンコンポーネントの下に子コンポーネントを入れ子にする必要があります。これが私の "options" propの使用を妨害します。以下のようにエラーがある:
警告:失敗した小道具のタイプ:
options
、selection
:小道具とchildren
Dropdown
で競合 プロップ。彼らはどちらか一方
を選択 、一緒に定義することができない、StackOverflowのをありがとう!
ありがとうございました!これは素晴らしいです。私は、このReactのlibがもっとうまくいく仕組みを理解しています。 – allthesignals