ReactJS中的自定义组件
可控自定义组件：
<!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祝各位在前端的道路上一帆风顺！！
ReactJS中的自定义组件的更多相关文章
- yii中的自定义组件
yii中的自定义组件(组件就是一些自定义的公用类) 1.在项目目录中的protected/components/Xxxx.php 2.在Xxxx.php中定义一个类,类名必须与文件名相同 3.控制器中 ...
- 微信小程序中的自定义组件
微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...
- 微信小程序中的自定义组件(components)
其实小程序开发很像vue和react的结合,数据绑定和setData 重新渲染页面的数据,最近发现连写组件都是很像,也是醉了,自我认为哈, 因为小程序可以将页面内的功能模块抽象成自定义组件,以便在 ...
- 微信小程序中的自定义组件 以及 相关的坑
Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件, ...
- 在Weex中定制自定义组件
1.配置自定义组件 public class MyViewComponent extends WXComponent{ public MyViewComponent(WXSDKInstance ins ...
- 在Vue前端项目中，附件展示的自定义组件开发
在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...
- Android 之 自定义标签 和 自定义组件
1 自定义标签 这是我的模板项目目录 既然想像 android:text 那样使用自己的标签,那么首先得有标签. 在 res/values/ 下我新建了个 mm_tag.xml (切记 ...
- Flash CS 自定义组件
2012年的时候,做了一些研究,可以后来没有去整理,没有去用到项目里头,现在把这些东西都放出来纪念一下,也给有需要的人作为参考. 基本知识: Flash使用基本知识与ActionScript 3.0的 ...
- 微信小程序开发---自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...
随机推荐
- mysql::批量入库
批量入库 INSERT INTO M_Signal (Signal_Id, Signal_Name) VALUES(,,'water') , , , , 'water') ON DUPLICATE K ...
- 第三方应用 flashfxp,filezilla提权
filezilla 提权 filezilla 开源的ftp服务器 默认监听14147端口 默认安装目录下有个敏感文件 filezillaserver.xml(包含用户信息) filezillaserv ...
- 最优解的lingo和MATLAB解法
最近运筹学学了线性规划和单纯形法,然后老师讲到了运用lingo和MATLAB软件分别求解的方法 首先,我们来讲讲lingo的(小技巧,只要把鼠标滑轮固定在输入界面按ctrl就可以放大了) lingo比 ...
- GC 知识点补充——CMS
之前已经讲过了不少有关 GC 的内容,今天准备将之前没有细讲的部分进行补充,首先要提到的就是垃圾收集器. 基础的回收方式有三种:清除.压缩.复制,衍生出来的垃圾收集器有: Serial 收集器 新生代 ...
- JVM(5) 类加载机制
虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化.最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 一.类加载的时机 类从被加载到虚拟机内存中开 ...
- net core WebApi——使用xUnits来实现单元测试
目录 前言 单元测试 xUnit 小结 附录 前言 从开始敲代码到现在,不停地都是在喊着记得做测试,记得自测,测试人员打回来扣你money之类的,刚开始因为心疼钱(当然还是为了代码质量),就老老实实自 ...
- forEach,map,every,some,filter简单用法实例
平时简单总结:不足之处还望见谅: 实例: 11.1 forEach:只能进行取值操作,不能进行修改 arr.forEach(function(element,index,arr){});//注意参数: ...
- u检验粗浅理解
假设检验是以小概率事件,在一次实验中是不可能发生为前提(事实上是有可能发生的,但不是这样说的话,就落入一个圈,不能继续玩了),来否认原假设. u检验的定义: 已知从正态母体N(u,σ2)中抽得容量为n ...
- fastjson自由：controller上指定active profile，让你想序列化什么字段就序列化什么字段
一.前言 最近有个需求,其实这个需求以前就有,比如定义了一个vo,包含了10个字段, 在接口A里,要返回全部字段: 但是在接口B里呢,需要复用这个 vo, 但是只需要返回其中8个字段. 可能呢,有些同 ...
- C#之委托如此简单
近期和几位做嵌入式开发的朋友闲聊过程中,一位朋友抱怨到:这C#太难用了,我想在N个窗体(或者是N个用户组件之间)传递值都搞不定,非得要定义一个全局变量来存储,然后用定时器来刷新值,太Low了.我急切的 ...