// here i have created the json for rendring the ui my question is how can i show or hide the control based on the checkbox checked ?
// I have created the UI using json data. how can i show or hide the specific control oncheck of checkbox?
var data= {
"equipmentItem": [
{
"category":"Equipment",
"Points": {
"type": "dropDown",
"lable": "Equipment Type",
"id":"202",
"Control":
{
"data": [
{
"value":"0",
"name":"Conventional"
},
{
"value":"1",
"name":"Air Side Heat Pump",
}
],
}
}
},
{
"Points": {
"lable": "Cooling Stages",
"type": "number",
"minLength": 4,
"maxLength": 200,
"description":"Enter",
id:102
}
},
{
"Points": {
"type": "radio",
"lable": "Heating Type",
"id":"202",
"Control":
{
"data": [
{
"value":"0",
"name":"None"
},
{
"value":"1",
"name":"Staged",
},
{
"value":"2",
"name":"Modulating",
}
],
}
}
},
{
"Points": {
"lable": "Heating Stages",
"type": "number",
"minLength": 4,
"maxLength":400,
"description":"Enter",
id:103
}
},
],
}
this.setState({items:data.equipmentItem})
}
// created the json to show the controls on page
render(){
let items=this.state.items;
const dynamicComponents= items.map((item,index)=>
<div>
{
this.getComponent(item,index)
}
</div>
)
}
// render function which loops the each item in array of objects
<Grid>
<Grid.Row>
<Grid.Column width={12}>
<Form>
{dynamicComponents}
<Button disabled={this.state.buttonDisabled} className="ui button" onClick={this.handleClickSave}>SAVE</Button>
<Button style={{marginTop:"20px"}}className="ui button" onClick={this.handleRefresh}>REFRESH</Button>
<ConfirmationPopup isPopup={this.state.isPopupOpen} data={this.state.inputArray} callbackFromPopup={this.closePopupFromChild}/>
<Button disabled={this.state.buildButton} style={{marginTop:"200px"}}className="ui button" onClick={this.buildPoints}>BUILD POINTS</Button>
</Form>
</Grid.Column>
</Grid.Row>
</Grid>
// this is return function which holds the dynamic components variable
getComponent(item,index){
debugger
switch(item.Points.type){
case "dropDown":
return <DropDown key={index} changeDropdown={this.handleOnChangeDropdown} lable={item.Points.lable} category={item.category} type={item.Points.type} arrayData={item.Points.Control.data}/>
case "radio":
return <RadioButton key={index} id={item.Points.id} change={this.handleChange} type='radio' lable={item.Points.lable} category={item.category} type={item.Points.type} arrayData={item.Points.Control.data}/>
case "number":
return <InputBox className="input" key={index} lable={item.Points.lable} type={item.Points.type} category={item.category} itemId={item.Points.id} maxLength={item.Points.maxLength} minLength={item.Points.minLength}/>
default:
break;
}
}
//this is getcomponent method which prints each component depends on the switch case
// this is getcomponent method which prints each component depends on the switch case
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
