如何在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>