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的 ...
- 微信小程序开发---自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...
随机推荐
- c++异常处理的方法
c++异常处理 程序运行时常会碰到一些异常情况,例如:做除法的时候除数为 0:用户输入年龄时输入了一个负数:用 new 运算符动态分配空间时,空间不够导致无法分配:访问数组元素时,下标越界:打开文件读 ...
- 基于SignalR的服务端和客户端通讯处理
SignalR是一个.NET Core/.NET Framework的实时通讯的框架,一般应用在ASP.NET上,当然也可以应用在Winform上实现服务端和客户端的消息通讯,本篇随笔主要基于Sign ...
- SVG系列 - 基础
标题为SVG基础,但是过于基础的东西就不再熬述啦,可以参考几个学习网址: SVG参考手册:http://www.runoob.com/svg/svg-reference.html MDN SVG:ht ...
- Solidity语言系列教程
Solidity 是一门面向合约的.为实现智能合约而创建的高级编程语言.这门语言受到了 C++,Python 和 Javascript 语言的影响,设计的目的是能在 以太坊虚拟机(EVM) 上运行. ...
- java 连续数字数组分组
问题: 1. 将Lis list = Arrays.asList(1,2,3,5,8,9,10), 拆分成 [1,2,3] .[5]. [8,9,10] , 2. 再传入一个数字 9, 将匹配数字9的 ...
- 简单认识JVM
准备: 在具体聊JVM之前,我们先看两张图,通过分析图,咱们慢慢来聊聊JVM. JVM内存结构图 JVM内存结构脑图 上面两张图中,第二张图相对来说比较直观,就是JVM内存结构都划分成了哪些模块,各个 ...
- git jenkins SonarQube手动代码质检
SonarQube代码质检:1.提交代码-->gitlab-->jenkins抓取-->sonarqube质量检测-->maven编译-->shell-->web集 ...
- wpf 依赖强制回调
依赖属性的强制转换加回调,后期自己再改 using System; using System.Collections.Generic; using System.Diagnostics; using ...
- 使用 git bisect 定位你的 BUG
Git 是开发者的好帮手,今天跟大家分享的是用 git bisect 来找到你代码中的 bad commit . 背景 你可能遇到过这种情况, 昨天下班前把模块开发完了, 单元测试验证通过, git ...
- CountDownLatch和CycliBarrier介绍
一.CountDownLatch 它被用来同步一个或多个任务,强制他们等待其他任务完成,这就是闭锁. public CountDownLatch(int count) { if (count < ...