力克胡哲,肖恩·巴蒂尔,村官考试报名条件
可控自定义组件：
我要评论<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var radio=react.createclass({
getinitialstate:function(){
return {
value:this.props.defaultvalue
};
},
handlechange:function(event){
if(this.props.onchange){
this.props.onchange(event);
}
this.setstate({
value:event.target.value
});
},
render:function(){
var children=[];
var value=this.props.value||this.state.value;
react.children.foreach(this.props.children,function(child,i){
var label=<label key={i}>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onchange={this.handlechange}/>
{child.props.children}
<br/>
</label>;
children.push(label);
}.bind(this));
return <span>{children}</span>;
}
});
var myform=react.createclass({
getinitialstate:function(){
return ({my_radio:"b"});
},
handlechange:function(event){
this.setstate({
my_radio:event.target.value
});
},
submithandler:function(event){
event.preventdefault();
alert(this.state.my_radio);
},
render:function(){
return (
<form onsubmit={this.submithandler}>
<radio value={this.state.my_radio} name="my_radio" onchange={this.handlechange}>
<option value="a">first option</option>
<option value="b">second option</option>
<option value="c">third option</option>
</radio>
<button type="submit">speak</button>
</form>
)
}
});
reactdom.render(<myform></myform>,document.body);
</script>
</body>
</html>
不可控的自定义组件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var radio=react.createclass({
getinitialstate:function(){
return {
value:this.props.defaultvalue
};
},
handlechange:function(event){
if(this.props.onchange){
this.props.onchange(event);
}
this.setstate({
value:event.target.value
});
},
render:function(){
var children=[];
var value=this.props.value||this.state.value;
react.children.foreach(this.props.children,function(child,i){
var label=<label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onchange={this.handlechange}/>
{child.props.children}
<br/>
</label>;
children['label'+i]=label;
}.bind(this));
return <span>{children}</span>;
}
});
var myform=react.createclass({
handlesubmit:function(event){
event.preventdefault();
alert(this.refs.radio.state.value);
},
render:function(){
return (
<form onsubmit={this.handlesubmit}>
<radio ref="radio" name="my_radio" defaultvalue="b">
<p value="a">first</p>
<option value="b">second option</option>
<option value="c">third option</option>
</radio>
<button type="submit">speak</button>
</form>
)
}
});
reactdom.render(<myform></myform>,document.body);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var radio=react.createclass({
getinitialstate:function(){
return {
value:this.props.defaultvalue
};
},
handlechange:function(event){
if(this.props.onchange){
this.props.onchange(event);
}
this.setstate({
value:event.target.value
});
},
render:function(){
var children=[];
var value=this.props.value||this.state.value;
react.children.foreach(this.props.children,function(child,i){
var label=<label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onchange={this.handlechange}/>
{child.props.children}
<br/>
</label>;
children['label'+i]=label;
}.bind(this));
return <span>{children}</span>;
}
});
var myform=react.createclass({
handlesubmit:function(event){
event.preventdefault();
alert(this.refs.radio.state.value);
},
render:function(){
return (
<form onsubmit={this.handlesubmit}>
<radio ref="radio" name="my_radio" defaultvalue="b">
<p value="a">first</p>
<option value="b">second option</option>
<option value="c">third option</option>
</radio>
<button type="submit">speak</button>
</form>
)
}
});
reactdom.render(<myform></myform>,document.body);
</script>
</body>
</html>
本人刚建立一个前端学习交流群，群内有很多干货适合前期和中期需要解决的问题，欢迎给位进群一起探讨互相帮助907694362祝各位在前端的道路上一帆风顺！！
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论