如何在 Semantic UI + React Dropdown 组件中插入标签元素？

Question

我想从语义 UI 重新创建以下下拉菜单，其中使用 UI React 为下拉菜单插入 <label>：

(https://semantic-ui.com/collections/form.html#dropdown)

这是我希望我的 React 应用程序创建的降价：

<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，但是需要在Dropdown组件下嵌套子组件，影响了我对"options"属性的使用。错误如下：

Warning: Failed prop type: Prop children in Dropdown conflicts with props: options, selection. They cannot be defined together, choose one or the other

谢谢你，Whosebug！

Answer 1

如果你在 Form 中使用它，你可以这样做：

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

如何在 Semantic UI + React Dropdown 组件中插入标签元素？

How to insert label element in Semantic UI + React Dropdown component?

html

drop-down-menu

reactjs

semantic-ui-react