在表單提交中對參數進行分組

Question

我在rails中有一個有幾個字段的反應表單組件。

陣營組件文件

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

當我提交他們讓我在服務器控制檯下面的參數如下。

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

如何分組參數說，我想從其餘的UTF8和authenticity_token分開。

期待像

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