如何使用json数据在reactjs中创建动态HTML表单？

Question

嗨，有人可以帮我如何使用本地json数据表单在reactjs中创建动态html表单。我有以下json格式，其中包含3个字段的表单详细信息。

{
"sampleData":
    [{"indexId":"1",
    "abrvIndexName":"firstname",
    "indexDesc":"First Name",
    "htmlControlType":"textbox",
    "cssClassName":"form-control"},
    {"indexId":"2",
    "abrvIndexName":"lastname",
    "indexDesc":"Last Name",
    "htmlControlType":"textbox",
    "cssClassName":"form-control"}
    {"indexId":"3",
    "abrvIndexName":"address",
    "indexDesc":"Address",
    "htmlControlType":"textarea",
    "cssClassName":"form-control"}
    ]
}

下面是我需要动态创建的表单的react组件，截至目前，我有3个字段是静态的，需要从上面的json动态放置。

var React = require('react');
var ReactDOM = require('react-dom');

var Menu = React.createClass({

render: function () {
    return (

        <div className="container">
            <br/>
            <div className="panel panel-primary">
                <div className="panel-heading">Sample Dynamic Form using json data</div>
                    <div className="panel-body">
                            <form className="form-horizontal">
                                <div className="form-group">
                                    <label for="firstname" className="col-sm-2 control-label">First Name</label>
                                        <div className="col-sm-8">
                                            <input type="text" className="form-control" id="firstname" placeholder=""/>
                                        </div>
                                </div>
                                <div className="form-group">
                                    <label for="lastname" className="col-sm-2 control-label">Last Name</label>
                                        <div className="col-sm-8">
                                            <input type="text" className="form-control" id="lastname" placeholder=""/>
                                        </div>
                                </div>
                                <div className="form-group">
                                    <label for="address" className="col-sm-2 control-label">Address</label>
                                        <div className="col-sm-8">
                                            <textarea type="text" className="form-control" id="address" placeholder=""/>
                                        </div>
                                </div>

                                <div className="col-md-10 text-right"> 
                                    <button type="button" className="btn btn-primary">Submit</button>
                                </div>

                            </form>


                    </div>      
            </div>
        </div>
    )
}

});
module.exports = Menu

我是新来的反应者，有人可以帮我在reactjs中做到这一点吗？

Answer 1

拥有JSON数据后，就可以对其进行map覆盖并动态创建布局，如下所示：

// You can `require` a local file or `fetch` it from somewhere

// For the demo purpose, I just included it here.

const JSON = [

    {

        "indexId":"1",

        "abrvIndexName":"firstname",

        "indexDesc":"First Name",

        "htmlControlType":"textbox",

        "cssClassName":"form-control"

    },

    {

        "indexId":"2",

        "abrvIndexName":"lastname",

        "indexDesc":"Last Name",

        "htmlControlType":"textbox",

        "cssClassName":"form-control"

    },

    {

        "indexId":"3",

        "abrvIndexName":"address",

        "indexDesc":"Address",

        "htmlControlType":"textarea",

        "cssClassName":"form-control"

}];



var Menu = React.createClass({



    renderFormGroups: function() {

        // Assume your data is fetched/available

        const data = JSON;



        // Here we build the form's groups elements dynamically

        return data.map(group => {

            return <div className="form-group">



                <label for={group.abrvIndexName}

                       className={"col-sm-2 " + group.cssClassName}>

                    {group.indexDesc}

                </label>



                 <div className="col-sm-8">

                      <input type="text"

                             className="form-control"

                             id={group.abrvIndexName}

                             placeholder="" />

                  </div>



            </div>

        });

    },



    render: function () {

        return (

            <div className="container">

                <div className="panel panel-primary">

                    <div className="panel-heading">Sample Dynamic Form using json data</div>

                    <div className="panel-body">

                        <form className="form-horizontal">

                            {this.renderFormGroups()}

                        </form>

                    </div>

                </div>

            </div>

        )

    }

});



ReactDOM.render(<Menu />, document.getElementById('container'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">

    <!-- This element's contents will be replaced with your component. -->

</div>