夺命雷公狗-----React---8--react官方提供的组建实现双向绑定
首先要引入她。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react-with-addons.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/browser.min.js"></script> </head>
<body>
<div id="demo"></div>
<script type="text/babel">
console.log(React);
//定义一个组建，名字第一个必须是大写
var Firs = React.createClass({
mixins:[React.addons.LinkedStateMixin],
/*组建的状态*/
getInitialState:function(){
return{
mes:this.props.value
}
},
render:function(){
return(
//必须要有一个大标签包围着才可以
<div>
<h1>Hello {this.props.user}</h1>
<input type="text" name="" valueLink={this.linkState('mes')} />
<input type="button" value={this.props.sendname} />
<p>{this.state.mes}</p>
</div>
);
},
changeHandle:function(ev){
//console.log(ev.target.value);
this.setState({mes:ev.target.value});
}
}); var obj = {
user: '夺命雷公狗',
sendname :'留言',
values : '请输入留言的信息'
} ReactDOM.render(<Firs {...obj} />, /*这里其实也可以使用双标签的如：<Fir></Fir> */
document.getElementById('demo'),
function(){
alert('页面渲染完成');
});
</script>
</body>
</html>
效果如下所示：
夺命雷公狗-----React---8--react官方提供的组建实现双向绑定的更多相关文章
- 夺命雷公狗-----React---12--添加类和样式
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 夺命雷公狗-----React---11--添加css样式的方法
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 夺命雷公狗-----React---10--组建嵌套进行数据遍历
先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 夺命雷公狗-----React---9--map数据的遍历
比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...
- 夺命雷公狗-----React---7--组建的状态props和state
props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...
- 夺命雷公狗-----React---6--props多属性的传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 夺命雷公狗-----React---5--props对象的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 夺命雷公狗-----React---4--props变量的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 夺命雷公狗-----React---3--标签的规则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Netty_Netty系列之Netty百万级推送服务设计要点
1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...
- UniversalAndroidImageLoader出现异常：ImageLoader: Unable to resolve host "https": No address associated with host
问题描述 使用ImageLoader时,出现如下错误,始终加载图片错误,显示img_error的图片.UniversalAndroidImageLoader出现异常:ImageLoader: Unab ...
- [转载]窗口之间的主从关系与Z-Order
窗口之间的主从关系与Z-Order 原文地址:http://www.cnblogs.com/dhatbj/p/3288152.html说明:这是本人2008年写的一篇旧文,从未公开发表过.其中除了一小 ...
- C# 安装和卸载 Windows Service
特别注意: 安装Window Service 的时候,一定要用管理员打开命令提示符(cmd) 1. 创建Windows Service 服务项目 2. Service设计界面:右键-->选择安装 ...
- 导入excle数据将excle数据插入到数据库
实现功能是,用户可以直接导入对应数据,或者用户下载模板,填写数据,导入模板数据.easyui实现 前台页面 { text : '日清导入', iconCls : 'icon-print', handl ...
- Jackson转换对象为json的时候报java.lang.stackoverflowerror
无论在将一个对象转为json字符串的时候采用何种算法,如果你的对象的属性的类型不是基本类型或对应的引用类型,转换应该都不会就此结束,那么有一种方式可以导致这种转换陷入无限循环:将某个对象的属性设为对象 ...
- mongo vue的常用操作
查找在某个范围内的记录: {"_id":{$in: [a,b,c]}} 如果images是个数组,则查询方式与普通数据一样:{"images":&quo ...
- Java 内存区域划分
JVM的内存区域划分 学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆.栈以及静态数据区.那么在Java语言当中,内存又是如何划分的 ...
- Docker三剑客之Swarm介绍
DockOne技术分享(二十): 我用swarm在多台物理机调度管理容器,用ovs实现跨主机的容器互联问题 [编者的话]Swarm项目是Docker公司发布三剑客中的一员,用来提供容器集群服务,目的是 ...
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...