Verwenden von Reduxformular mit semantischer UI

Question

Ich versuche herauszufinden, wo ich meinen Spread-Operator in meine Semantic UI Form einfügen sollte.

<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); 
} 

Aktuell können Sie sehen, ich meine Ausbreitung Operator haben, {...gender}, in der div mit Klasse menu. Wenn ich aus der Dropdown-Box wähle undefined.

Wer hat eine Idee?

Answer 1

Ich musste ein bisschen mehr über Semantic CSS Klassen lernen. Hier ist der Code, der einen schönen Drop-Down mit Redux Formular

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

schafft Wenn Sie nicht die Möglichkeit, einen Wert geben, damit sie als Ihre Kopf-/Titel sehen. IT wird keine Option sein und wird verschwinden, sobald der Benutzer eine Auswahl trifft. Die Option {...} wird für die Validierung des Redux-Routers verwendet.