如何使用json数据在reactjs中创建一个动态HTML表单？ [英] How to create a Dynamic html form in reactjs using json data?
本文介绍了如何使用json数据在reactjs中创建一个动态HTML表单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
{
sampleData：
[{indexId：1，
abrvIndexName：firstname，
indexDesc：First Name，
htmlControlType：textbox b $ bcssClassName：form-control}，
{indexId：2，
abrvIndexName：lastname，
indexDesc
htmlControlType：textbox，
cssClassName：form-control}
{indexId：3，
abrvIndexName地址，
indexDesc：地址，
htmlControlType：textarea，
cssClassName：form-control}
]
以下是我需要动态创建的表单的反应组件，截至目前为止有3个字段是静态的，需要从上面的json动态放置。
var React = require（'react'）;
var ReactDOM = require（'react-dom'）;
var Menu = React.createClass（{
render：function（）{
return（
< div className =容器>
< br />
< div className =panel panel-primary>
< div className =panel-heading>示例动态表单使用json数据< / div>
< div className =panel-body>
< form className =form-horizontal>
< div className = -group>
< label for =firstnameclassName =col-sm-2 control-label>名字< / label>
< div className =col-sm -8>
< input type =textclassName =form-controlid =firstnameplaceholder =/>
< / div>
< ; / div>
< div className =form-group>
< label for =lastnameclassName =col-sm-2 control-label>姓氏< / label>
< div className =col-sm-8>
< input type =textclassName =form-controlid =lastnameplaceholder =/>
< / div>
< / div>
< div className =form-group>
< label for =addressclassName =col-sm-2 control-label>地址< / label>
< div className =col-sm-8>
< textarea type =textclassName =form-controlid =addressplaceholder =/>
< / div>
< / div>
< div className =col-md-10 text-right>
< button type =buttonclassName =btn btn-primary> Submit< / button>
< / div>
< / form>
< / div>
< / div>
< / div>
）
}
}）;
module.exports =菜单
我是新来的反应，任何人都可以帮我
解决方案
拥有JSON数据后，您可以 map ，并动态创建布局，如下所示：
//你可以`require`一个本地的文件或`fetch`它从某个地方//为了演示的目的，我只是把它包含在这里.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}，{indexI d：3，abrvIndexName：address，indexDesc：Address，htmlControlType：textarea，cssClassName：form-control}]; var Menu = React.createClass {renderFormGroups：function（）{//假设你的数据被提取/可用const data = JSON; //这里我们构建表单的组元素动态返回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 =textclassName =form-controlid = {group.abrvIndexName} placeholder =/>< / div>< / div>}）; }，render：function（）{return（< div className =container>< div className =panel panel-primary>< div className =panel-heading>数据< / 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> <！ - 此元素的内容将替换为您的组件。 - >< / div>
Hi can anyone help me how to create a dynamic html form in reactjs using the json data form local. I have the below json format which contains the form details for 3 fields.
{
"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"}
]
}
and below is the react component for the form which I need to create dynamically, as of now i have 3 fields which are static and need to dynamically put from the above 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
I'm new to react so,Can anyone help me how to do that in reactjs?
解决方案
Once you have the JSON data, you can map over it and create the layout dynamically, something like that:
// 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>
这篇关于如何使用json数据在reactjs中创建一个动态HTML表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
