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>

在表单提交中对参数进行分组

1 个答案: