如何在Semantic UI + React Dropdown組件中插入標籤元素？

Question

我想重新從語義UI下面的下拉列表中，其中<label>插入使用UI React下拉菜單：

（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> 

我很努力地通過Semantic 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用於添加標籤，但是，它需要在Dropdown組件下嵌套子組件，這會干擾我使用「選項」prop。錯誤如下：

警告：無法道具類型：道具children在Dropdown衝突 道具：options，selection。他們不能被定義在一起， 選擇一個或另一個

謝謝，＃1！

Answer 1

如果您正在使用它Form裏面你可以這樣做：

<Form> 
    <Form.Dropdown 
    label='Gender' 
    options={//your array of options} 
    selection 
    /> 
</Form>