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的 ...
- 微信小程序开发---自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...
随机推荐
- 01jmeter-beanshell常用代码段
1.获取时间 import java.util.*; import java.text.SimpleDateFormat; String str1 = (new SimpleDateFormat(&q ...
- 深入理解 Java 中的 final 关键字
final 是Java 中重要关键字之一,可以应用于类.方法以及变量上.这篇文章中将讲解什么是 final 关键字?将变量.方法和类声明为 final 代表了什么?使用 final 的好处是什么? f ...
- linux "No space left on device" 磁盘空间解决办法
某年某月某日某时,某人在工作中设置crontab定时任务规则保存时,提示“No space left on device”,此时用df -h检查磁盘,发现还有剩余空间.请问是什么原因及如何排查?什么会 ...
- vue系列---snabbdom.js使用及源码分析(九)
一:什么是snabbdom? 在学习Vue或React中,我们了解最多的就是虚拟DOM,虚拟DOM可以看作是一颗模拟了DOM的Javascript树,主要是通过vnode实现一个无状态的组件,当组件状 ...
- Navicate12激活教程(完整详细版)
写在前面 最近身边的小伙伴苦于没有Navicat12的激活工具,不能使用最新版的Navicat,鉴于此,遂将自己整理的文章贴出来,供大家参考,不过个人还是主张维护正版的意愿,如果经济实力允许的话,还是 ...
- Spring之Zuul初步使用(十)
一.zuul是什么 zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul 在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架. ...
- PHP 类中使用全局变量和全局常量
<?php $global_var = "var"; define('global_const', 'const'); class Test { public $_var; ...
- 神舟+win10+ubuntu16.04+256GSSD+1THHD双系统安装加openssl踩坑之旅
上海最近搞活动调休,要搞深度学习,win上还是不方便,准备弄个ubuntu.于是有以下回忆文字. 在机器上装了个双系统.花了两天.再也不想玩了. 准备用ubuntu来做深度学习的. 本文写于2019年 ...
- Java中数组操作 java.util.Arrays 类常用方法的使用
任何一门编程语言,数组都是最重要和常用的数据结构之一,但不同的语言对数组的构造与处理是不尽相同的. Java中提供了java.util.Arrays 类能方便地操作数组,并且它提供的所有方法都是静态的 ...
- Unity5-ABSystem(二)：AssetBundle导出
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/lodypig/article/detai ...