创建动态HTML使用json数据在reactjs [英] Creating Dynamic HTML using json data in reactjs
问题描述
我有下面的json数据和反应代码动态填充数据
I have the below json data and the react code to populate the data dynamically
var DATA = [{"processList":
[{"processId":"1","processName":"Process1","htmlControlType":"radio","cssClassName":"radio"},
{"processId":"2","processName":"Process2","htmlControlType":"radio","cssClassName":"radio"}],
"processIndexList":
[{"processId":"1","indexId":"1","indexDesc":"First Name","htmlControlType":"textbox","cssClassName":"form-control"},{"indexId":"2","indexDesc":"Last Name","htmlControlType":"textbox","cssClassName":"form-control"}]}];
renderProcessList: function () {
const data = DATA;
return data[0].processList.map(group => {
return <div className={group.cssClassName}>
<label><input type={group.htmlControlType} name="processOptions"/>{group.processName}</label>
</div>
});
},
renderProcessData: function () {
const data = DATA;
return data[0].processIndexList.map(group => {
return <div>
<label>{group.indexDesc}</label>
<input type={group.htmlControlType} className={group.cssClassName} placeholder=""/>
<br/>
</div>
});
},
到目前为止，表单正在基于json数据，但是我想根据进程列表中的用户选择显示表单
例如：如果用户选择Process1收音机，则需要在收音机下方显示名字文本框，用户选择process2然后姓氏文本框需要被忽略。
As of now the form is getting displayed based on the json data, but i want to display the form based on the user selection in the process list ex: If the user select the Process1 radio the the First Name text box needs to be displayed below the radio and the user selects the process2 then Last Name text box needs to be displyed.
任何人都可以告诉我如何在reactjs中执行？
Can anyone tell me how to do it in reactjs?
推荐答案
要实现这个任务，你必须执行接下来的三个步骤：
To achieve the task, you have to implement the next three steps:
- 输入点击。
- 存储所选的进程ID在状态。
- 根据所选的ID（也称为过滤）显示进程列表项。 / li>
- Handle radio input click.
- Store the selected process ID in the state.
- Display process list items, based on the selected ID (a.k.a. filtering).
请注意，您错过了添加 processId code> processIndexList [1] 对象
Please note that you missed to add processId property in processIndexList[1] object.
另请注意，在下面的例子中， m使用bas ic过滤在 renderProcessData（）。
Also please consider that in the example below I'm using basic filtering in renderProcessData().
在ES5，ES6由于问题的作者请求。请记住，在这两个例子中，我使用JSX，所以你需要一个编译器工具（例如Babel）。使用编译器后，可以使用最新的JS功能。请修改您使用ES5的选择。
I implemented the example in ES5, ES6 because of question's author request. Keep in mind that in the both examples I'm using JSX, so you need a compiler tool (Babel for example). Once you use a compiler, then you can use latest JS features. Please revise your choise of using ES5.
var DATA = [{
"processList": [{
"processId": "1",
"processName": "Process1",
"htmlControlType": "radio",
"cssClassName": "radio"
},
{
"processId": "2",
"processName": "Process2",
"htmlControlType": "radio",
"cssClassName": "radio"
}
],
"processIndexList": [{
"processId": "1",
"indexId": "1",
"indexDesc": "First Name",
"htmlControlType": "textbox",
"cssClassName": "form-control"
}, {
"processId": "2",
"indexId": "2",
"indexDesc": "Last Name",
"htmlControlType": "textbox",
"cssClassName": "form-control"
}]
}];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedProcessID: null
};
}
setProcessID(e) {
this.setState({
selectedProcessID: e.target.value
});
}
renderProcessList() {
const data = DATA;
return data[0].processList.map( group => {
return <div className={group.cssClassName}>
<label><input
value={group.processId}
onClick={this.setProcessID.bind(this)}
type={group.htmlControlType}
name="processOptions"/>{group.processName}</label>
</div>
});
}
renderProcessData() {
// Display process data, only if there is already
// selected process ID
if ( ! this.state.selectedProcessID) return;
const data = DATA;
return data[0].processIndexList.map( group => {
// Display process list items for the selected process ID.
// The filtering can be implemented performance better with a library (lodash for example).
// Current implementation is enough for the SO demo.
if (group.processId !== this.state.selectedProcessID) return;
return <div>
<label>{group.indexDesc}</label>
<input type={group.htmlControlType} className={group.cssClassName} placeholder=""/>
<br/>
</div>
});
}
render() {
return <div>
{this.renderProcessList()}
{this.renderProcessData()}
</div>
}
}
ReactDOM.render(<App />, 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>
var DATA = [{
"processList": [{
"processId": "1",
"processName": "Process1",
"htmlControlType": "radio",
"cssClassName": "radio"
},
{
"processId": "2",
"processName": "Process2",
"htmlControlType": "radio",
"cssClassName": "radio"
}
],
"processIndexList": [{
"processId": "1",
"indexId": "1",
"indexDesc": "First Name",
"htmlControlType": "textbox",
"cssClassName": "form-control"
}, {
"processId": "2",
"indexId": "2",
"indexDesc": "Last Name",
"htmlControlType": "textbox",
"cssClassName": "form-control"
}]
}];
var App = React.createClass({
getInitialState() {
return {
selectedProcessID: null
}
},
setProcessID: function(e) {
this.setState({
selectedProcessID: e.target.value
});
},
renderProcessList: function() {
const data = DATA;
return data[0].processList.map( group => {
return <div className={group.cssClassName}>
<label><input
value={group.processId}
onClick={this.setProcessID.bind(this)}
type={group.htmlControlType}
name="processOptions"/>{group.processName}</label>
</div>
});
},
renderProcessData: function() {
// Display process data, only if there is already
// selected process ID
if ( ! this.state.selectedProcessID) return;
const data = DATA;
return data[0].processIndexList.map( group => {
// Display process list items for the selected process ID.
// The filtering can be implemented performance better with a library (lodash for example).
// Current implementation is enough for the SO demo.
if (group.processId !== this.state.selectedProcessID) return;
return <div>
<label>{group.indexDesc}</label>
<input type={group.htmlControlType} className={group.cssClassName} placeholder=""/>
<br/>
</div>
});
},
render: function() {
return <div>
{this.renderProcessList()}
{this.renderProcessData()}
</div>
}
});
ReactDOM.render(<App />, 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>
这篇关于创建动态HTML使用json数据在reactjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
