class Rent extends React.Component{
changeModel(){
var ele = document.getElementById('car_type').value;
var val = document.getElementById('car_model');
var hatch = "<option value = 'Indica'>Indica</option><option value='Swift'>Swift</option><option value = 'Logan'>Logan</option>";
var sedan = "<option value = 'Indigo'>Indigo</option><option value='Xuv'>Xuv</option><option value = 'Accent'>Accent</option>";
var van = "<option value = 'Omni'>Omni</option><option value='Vagon-R'>Vagon-R</option><option value = 'Bolero'>Bolero</option>";
switch(ele){
case 'hatchback':
React.render(hatch,val);
break;
case 'sedan':
React.render(sedan,val);
break;
case 'van':
React.render(van,val);
break;
}
}
render(){
return(
<div id = "content">
<div id="content-header">
<div className="container-fluid">
<div className="widget-box">
<div className="widget-content nopadding">
<form action="#" method="get" className="form-horizontal">
<div className="control-group">
<label className="control-label">Car Type</label>
<div className="controls" >
<select id ="car_type" onChange = {this.changeModel}>
<option value ="hatchback">Hatch Back</option>
<option value ="van">Van</option>
<option value ="sedan">Sedan</option>
</select>
</div>
</div>
<div className="control-group">
<label className="control-label">Car Model</label>
<div className="controls ">
<select id ="car_model" placeholder = "Select Car model">
</select>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
)
}
}
Это мой код, я не могу вынести мой car_model поля выбора на основе car_type выбора box.I использовало reactJS визуализации функции для изменения виртуального DOM, а также попытался изменить фактический DOM с помощью .innerHTML
функции, но ни один из них не работал вне.Как визуализировать окно выбора, основанное на значениях другого в ReactJS?
вы можете использовать 'event.target.value' вместо' 'getElementById' в changeModel()' метода доступа к значению по 'event.target.value'. –
в рендеринге, есть несоответствие '', u закрытая 'форма' дважды. –