セマンティックUIでReduxフォームを使用する

Question

セマンティックUIフォーム内にスプレッド演算子を配置する場所を特定しようとしています。

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

現在、私はクラスmenuとdivで、私のスプレッド演算子、{...gender}を持って見ることができます。ドロップダウンボックスから選択すると、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の検証に使用されます。