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++ Web框架::cintara
1.Cinatra是由C++开源社区purecpp发起的一个开源项目,是一个现代C++写的Web框架,旨在给用户提供一个易用.灵活和高性能的Web框架,让用户能完全专注于核心逻辑而无需关注http细节 ...
- 《深入理解Java虚拟机》-----第10章 程序编译与代码优化-早期(编译期)优化
概述 Java语言的“编译期”其实是一段“不确定”的操作过程,因为它可能是指一个前端编译器(其实叫“编译器的前端”更准确一些)把*.java文件转变成*.class文件的过程;也可能是指虚拟机的后端运 ...
- Mybaits 源码解析 （一）----- 搭建一个mybatis框架（MyBatis HelloWorld）
源码分析之前先搭一个mybatis的demo,这个在看源码的时候能起到了很大的作用,因为在看源码的时候,会恍然大悟,为什么要这么配置,为什么要这么写.(老鸟可以跳过这篇) 开发环境的准备 创建mave ...
- Java线程池的正确关闭方法，awaitTermination还不够
问题说明 今天发现了一个问题,颠覆了我之前对关闭线程池的认识. 一直以来,我坚信用shutdown + awaitTermination关闭线程池是最标准的方式. 不过,这次遇到的问题是,子线程用到B ...
- matlab 7遇到的错误 解决方法
安装路径 参考D:\matlab7 安装最后一步弹出 未找到解决方法.不过没有发现有何影响. 安装完成后出现 1. To configure Real-Time Windows Target you ...
- SpringBoot之响应式编程
一 Spring WebFlux Framework说明 Spring WebFlux 是 Spring Framework 5.0 中引入的新 reactive web framework.与 Sp ...
- 【Linux系列】Linux基础知识整理
Linux操作系统在服务器领域广泛的使用到,作为一个后台开发工程师很有必要了解Linux相关的知识. 本篇日志是我学习Linux过程中的简单记录和总结.本着"理论够用,实践为主"的 ...
- Tomcat因项目迁移，启动窗口一闪而过，启动失败的解决办法。
笔者手动部署一个web项目到Tomcat/webapps/目录下,成功运行.后来,项目结束,我把webapps下的姓项目文件夹删除.重启Tomcat时,运行...\apache-tomcat-8.5. ...
- java常用类 比较器/system/math/big
Java 比较器 自然排序:java.lang.Comparable 定制排序:java.util.Comparator 自然排序:java.lang.Comparable Comparable接口 ...
- VB.NET 与 SAP RFC连接问题点
与SAP RFC连接,电脑上必须要安装SAP软件,否则会报错ActiveX 输入工单号,无法带出SAP内接口RFC信息. 确认原因为:RFC接口需求的工单参数需要在前面加两位00,例如:1000541 ...