フォーム提出時のパラメータのグループ化

Question

私はリアクションフォームコンポーネントがいくつかのフィールドを持つレールにあります。

は、コンポーネントファイル

var TemplateForm = React.createClass({ 
    render: function() { 
     return (
      <div className="panel"> 
       <div className="panel-header"> 
        Create new Template 
       </div> 
       <div className="panel-content"> 
        <form entype="multipart/form-data" ref="template_form" action={this.props.baseUrl} acceptCharset="UTF-8" method="post"> 
         <input name="utf8" type="hidden" value="✓" /> 
         <input type="hidden" name='authenticity_token' value={this.props.authenticity_token} /> 
         <ul> 
          <li className="item"> 
           <label className="f-label field-required">Name</label> 
           <input className="txt-box medium" name="template-name"/> 
          </li> 

          <li className="item"> 
           <label className="f-label field-required">Paper Size</label> 
           <select id ="paper-size" name="paper-size" className="medium" > 
            <option>A4</option> 
            <option>A3</option> 
           </select> 
          </li> 
          <li className="item"> 
           <label className="f-label field-required">Theme</label> 
           <select id ="theme" name="theme" className="medium"> 
            <option>Daffodils</option> 
           </select> 
          </li> 
         </ul> 

        </form> 
       </div> 
       <div className="panel-footer"> 
        <button className="btn beta-btn" onClick={this.submitForm}>Create Template</button> 
       </div> 
      </div> 
     ); 
    }, 
    submitForm: function(){ 
     this.refs.template_form.submit(); 
    } 
}); 

私はそれらを送信すると、私は、サーバーコンソールで以下のパラメータ以下の取得を反応します。 Iグループを行うパラメータは、私が残りからUTF8とauthenticity_tokenを分離したいと言う方法

{"utf8"=>"✓", 
"authenticity_token"=>"some_token", 
"template-name"=>"World", 
"paper-size"=>"A4", 
"theme"=>"Daffodils"} 

。

{"utf8"=>"✓", 
"authenticity_token"=>"some_token", 
"template_info" => { 
    "template-name"=>"World", 
    "paper-size"=>"A4", 
    "theme"=>"Daffodils" 
} 
} 

Answer 1

よう

期待出力は、あなたの入力に名前空間を追加します。

<ul> 
    <li className="item"> 
    <label className="f-label field-required">Name</label> 
    <input className="txt-box medium" name="template_info[template-name]"/> 
</li> 

<li className="item"> 
    <label className="f-label field-required">Paper Size</label> 
    <select id ="paper-size" name="template_info[paper-size]" className="medium" > 
    <option>A4</option> 
    <option>A3</option> 
    </select> 
</li> 
<li className="item"> 
    <label className="f-label field-required">Theme</label> 
    <select id ="theme" name="template_info[theme]" className="medium"> 
    <option>Daffodils</option> 
    </select> 
</li> 
</ul>