夺命雷公狗-----React---7--组建的状态props和state
props：组建初始要渲染的数据，他是不可以改变的
state：组建状态发生改变，调用render重新渲染数据
我们来写一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.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">
//定义一个组建，名字第一个必须是大写
var Firs = React.createClass({
/*组建的状态*/
getInitialState:function(){
return{
mes:this.props.value
}
},
render:function(){
return(
//必须要有一个大标签包围着才可以
<div>
<h1>Hello {this.props.user}</h1>
<input type="text" name="" value={this.state.mes} onChange={this.changeHandle} />
<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---7--组建的状态props和state的更多相关文章
- 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定
首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 夺命雷公狗-----React---10--组建嵌套进行数据遍历
先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 夺命雷公狗-----React---9--map数据的遍历
比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...
- 夺命雷公狗-----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 ...
- 夺命雷公狗-----React---2--组建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 夺命雷公狗-----React---12--添加类和样式
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
随机推荐
- php xls 导出乱码解决方案
采用phpmyadmin的处理方式 //这个很关键 BU 订单号 产品ID 产品名称 原价 售价 房间 成人数 小孩数 总人数 出团日期 出团天数差 客人信息 姓名 性别 年龄 总价 下单日期 订单状 ...
- Tom and paper
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5224 题意: 给出矩形的面积,求出最小的周长. 样例: Sample Input 3 2 7 12 ...
- CAS单点登录系统整合——注册的问题
最近一段时间在搞CAS单点登录系统,涉及到几个子系统的整合问题.对于注册,这里遇到了一个选择: 在子系统内完成注册,然后把信息同步到CAS系统: 在CAS系统中完成基本信息的注册,比如:用户名.邮箱. ...
- mysql安装及卸载
一.关于mysql MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...
- 重写(Override)与重载(Overload)
重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类 ...
- nginx基于IP的虚拟主机
知识点: server的语法: upstream语法: upstream中192.168.100.1不是ip只是个标识,只要和下面的proxy_pass 对应即可. 基于IP的虚拟主机: listen ...
- HDU 1421 DP
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- php+curl上传文件
因为公司项目用java做的,需要我这边用php上传文件.只给了个接口,参数都不明确,然后这边不提交表单,在生成pdf之后就立马上传.用了php+curl,总是没上传成功,这里看到了篇文章http:// ...
- springMVC+spring+hibernate注解上传文件到数据库，下载，多文件上传
数据库 CREATE TABLE `annex` ( `id` bigint() NOT NULL AUTO_INCREMENT, `realName` varchar() DEFAULT NULL, ...
- bind绑定事件，摁回车键提交查询，点击查询也可以提交查询
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...