Использование формы Редукса с семантическим UI

Question

Я пытаюсь выяснить, куда я должен поместить свой оператор спреда внутри моей формы семантического интерфейса.

<div class="ui selection dropdown"> 
    <input type="hidden" name="gender"> 
    <i class="dropdown icon"></i> 
    <div class="default text">Gender</div> 
    <div class="menu" {...gender}> 
    <div class="item" data-value="0">Male</div> 
    <div class="item" data-value="1">Female</div> 
    </div> 
</div> 


function validate(values) { 
    const errors = {}; 

    console.log(values.gender); 
} 

В настоящее время вы можете видеть, у меня есть распространение оператора, {...gender}, в div с классом menu. Когда я выберу из раскрывающегося списка, он будет выводить undefined.

У кого-нибудь есть идея?

Answer 1

Мне нужно было узнать немного больше о семантических классах CSS. Вот код, который создает хорошее ниспадающее меню с помощью Redux формы

<div className="field"> 
    <select className="ui dropdown input" {...options}> 
    <option value="">This is the header side the input</option> 
    <option value="1">Option 1</option> 
    <option value="0">Option 2</option> 
    <option value="2">Option 3</option> 
    </select> 
</div> 

Если вы не даете опции значения будет видеть его в качестве заголовка/названия. IT не будет вариантом и исчезнет, ​​как только пользователь сделает выбор. Параметр {... option} используется для проверки Redux Router.