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的 ...
- 微信小程序开发---自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...
随机推荐
- 5. Sersync实时同步
rsync+Sersync数据的实时同步 sersync介绍 1.什么是实时同步 监控一个目录的变化, 当该目录触发事件(创建\删除\修改) 就执行动作, 这个动作可以是 rsync同步 ,也可以是其 ...
- oracle计算两个时间的差值（XX天XX时XX分XX秒）
在工作中需要计算两个时间的差值,结束时间 - 开始时间,又不想在js里写function,也不想在java里去计算,干脆就在数据库做了一个函数来计算两个时间的差值.格式为XX天XX时XX分XX秒: 上 ...
- linux 中more、less 和 most 的区别
如果你是一个 Linux 方面的新手,你可能会在 more.less.most 这三个命令行工具之间产生疑惑.在本文当中,我会对这三个命令行工具进行对比,以及展示它们各自在 Linux 中的一些使用例 ...
- Spring 基础知识学习
Spring 总结 在Spring框架的发布版本中,共包含了20个不同的模块,可以划分为6类不同的功能. Spring整体架构图 为了降低Java开发的复杂性,Spring采取了以下4种关键策略: 基 ...
- 用深度优先搜索(DFS)解决多数图论问题
前言 本文大概是作者对图论大部分内容的分析和总结吧,\(\text{OI}\)和语文能力有限,且部分说明和推导可能有错误和不足,希望能指出. 创作本文是为了提供彼此学习交流的机会,也算是作者在忙碌的中 ...
- 百万年薪python之路 -- MySQL数据库之 用户权限
MySQL用户授权 (来自于https://www.cnblogs.com/dong-/p/9667787.html) 一. 对新用户的增删改 1. 增加用户 : ①. 指定某一个用户使用某一个ip登 ...
- JDK1.8 新特性详解
一 引言 现在java 10都已经出来了,而自己对java 8的一些新特性都不了解,很是惭愧,而且许多面试都有问到java8的新特性,借此博客好好学习这些新特性 二 新特性 1 default关键 ...
- Unity 单例模式
明天十一放假,今天不知什么原因看到一篇unity单例模式的介绍,瞬间来了戾气. (一)最简单的单利 public class WebRequestUtility : MonoBehaviour { p ...
- unity 截屏总结
转载与https://www.cnblogs.com/MissLi/p/8005342.html 1.针对指定的相机进行截屏 此中方式要添加yield return waitfortheEndofFr ...
- 面向对象的7个设计原则->开车理解->贴近生活
设计模式在我们的开发中是不可或缺的一部分,很多人会说,我没用那些设计模式啊,我也开发的挺好的,其实不然,我们在开发中都用到了这些设计模式,只不过我们并没有在意这些,今天我就用开车的方法来解释一下我们的 ...