Как вставить элемент метки в компонент Semantic UI + React Dropdown?

Я хотел бы воссоздать следующий раскрывающийся список из семантического пользовательского интерфейса, в котором <label> вставлен для раскрывающегося меню с помощью UI React: Выпадающее меню семантического пользовательского интерфейса

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

Я изо всех сил пытаюсь достичь этого с помощью реализации 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}]` } />

Очень важно, чтобы это было четко обозначено. В ходе исследования пользователей я обнаружил, что заполнитель сбивает с толку как вопросительный запрос.

Для добавления метки существует документация, однако она требует вложенности дочерние компоненты в раскрывающемся списке, что мешает мне использовать опору «параметры». Ошибка выглядит следующим образом:

Предупреждение: Неудачный тип пропса: Опора children в Dropdown конфликтует с реквизитом: options, selection. Их нельзя определить вместе, выберите один или другой

Спасибо, Stackoverflow!


reactjs html drop-down-menu semantic-ui-react
person allthesignals    schedule 12.06.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Если вы используете его внутри Form, вы можете:

<Form>
  <Form.Dropdown
    label='Gender'
    options={//your array of options}
    selection
  />
</Form>
person BravoZulu    schedule 12.06.2017
comment
Спасибо! Это прекрасно работает. Теперь я немного лучше понимаю структуру того, как эта библиотека React работает. - person allthesignals; 12.06.2017