[英]on select render different form reactjs
I am developing an app using react js. 我正在使用react js开发一个应用程序。 currently stuck at how to load different forms onchange event of select. 目前停留在如何加载select的onchange事件的不同形式。
var Eventoption = React.createClass({
getInitialState: function() {
return {
value: 'A'
}
},
change:function(event){
this.setState({value: event.target.value});
},
render : function(){
return <div className="form-group">
<select onChange={this.change} value={this.state.value} className="form-control">
<option value="A">Event1</option>
<option value="V">Event2</option>
<option value="S">Event3</option>
</select>
<p></p>
<p>{this.state.value}</p>
</div>
}
});
So on select on event2 i want to load different form Which say i have saved it in event2.js 所以在选择event2时,我想加载不同的表单,也就是说我已经将其保存在event2.js中
eg 例如
var Event2Form = React.createClass({
render:function() {
return
<h3><u>Add Event</u></h3>
<form action="index.php" method="post" id="event2Form">
<div className="form-group">
<label for="exampleEventId">Event Id</label>
<input type="text" name="event_id" className="form-control" id="event_id" placeholder="Enter Event Id" />
</div>
<div className="form-group">
<label for="exampleEventName">Event Name</label>
<input type="text" name="event_name" className="form-control" id="event_name" placeholder="Enter Event name" />
</div>
</form>
</div>;
}
});
window.Event2Form = Event2Form;
Let me know, how it can be achieved or any other better approach is there other than current one. 让我知道,除了当前的方法之外,还有其他方法可以实现。
One of the easiest way. 最简单的方法之一。
var Eventoption = React.createClass({
getInitialState: function() {
return {
value: 'A'
}
},
change:function(event){
this.setState({value: event.target.value});
},
render : function(){
var formCmp;
if (this.state.value === 'A')
formCmp = <Event1Form />
else if (this.state.value === 'V')
formCmp = <Event2Form />
return (
<div className="form-group">
<select onChange={this.change} value={this.state.value} className="form-control">
<option value="A">Event1</option>
<option value="V">Event2</option>
<option value="S">Event3</option>
</select>
<p></p>
<p>{this.state.value}</p>
{formCmp}
</div>
);
}
});
var Event2Form = React.createClass({
render:function() {
return
<h3><u>Add Event</u></h3>
<form action="index.php" method="post" id="event2Form">
<div className="form-group">
<label for="exampleEventId">Event Id</label>
<input type="text" name="event_id" className="form-control" id="event_id" placeholder="Enter Event Id" />
</div>
<div className="form-group">
<label for="exampleEventName">Event Name</label>
<input type="text" name="event_name" className="form-control" id="event_name" placeholder="Enter Event name" />
</div>
</form>
</div>;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.