第六节,用户交换,操作this.state对象
来源:互联网 发布:开淘宝网店计划书 编辑:程序博客网 时间:2024/05/27 20:51
<!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>
<!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component, .PropTypes, .Children 这些 API,而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。 -->
<script src="js/browser.min.js"></script> <!-- 使浏览器支持babel,你可以使用ECMAscript2015编码(javascript下一代标准) .js、.jsx、.es和.es6 -->
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let ChangeLike = React.createClass({
//ceateClass创建的类,首字母必须大写 例如 HelloMessage
//let是ECMA6的声明变量,用它所声明的变量, 只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统初始方法,不能修改方法名
//用来定义state内的初始属性
return {like : true};
},
handleClick(){
// setState用来变更 this.state
this.setState({like : !this.state.like});
},
render(){
// this.state.like 可以获取state内的 like属性
let text = this.state.like ? 'like' : 'doesn’t like';
return (
<p onClick={this.handleClick}>
You {text} it, click here to change.
</p>
);
}
});
ReactDOM.render(
<ChangeLike />,
document.getElementById('ex1')
);
</script>
</body>
</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>
<!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component, .PropTypes, .Children 这些 API,而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。 -->
<script src="js/browser.min.js"></script> <!-- 使浏览器支持babel,你可以使用ECMAscript2015编码(javascript下一代标准) .js、.jsx、.es和.es6 -->
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let ChangeLike = React.createClass({
//ceateClass创建的类,首字母必须大写 例如 HelloMessage
//let是ECMA6的声明变量,用它所声明的变量, 只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统初始方法,不能修改方法名
//用来定义state内的初始属性
return {like : true};
},
handleClick(){
// setState用来变更 this.state
this.setState({like : !this.state.like});
},
render(){
// this.state.like 可以获取state内的 like属性
let text = this.state.like ? 'like' : 'doesn’t like';
return (
<p onClick={this.handleClick}>
You {text} it, click here to change.
</p>
);
}
});
ReactDOM.render(
<ChangeLike />,
document.getElementById('ex1')
);
</script>
</body>
</html>
0 0
- 第六节,用户交换,操作this.state对象
- React this.state
- EXCEL动态数据交换(OLE对象操作)
- oracle用户对象的操作
- 13.3节 交换操作练习
- react教程之this.state
- react this.state + 组件生命周期
- 第六章 this关键字
- 不直接操作state
- 《.NET框架程序设计》第六章 通用对象操作
- 《.NET框架程序设计》第六章 通用对象操作
- JQuery 中this和$(this)获取对象、操作DOM对象的元素属性
- java第六节-this关键字,java的内部类
- this对象
- 3、React中的状态(this.state)
- React学习(八)this.state
- 第六节:类和对象(一)
- 快速枚举 . 数组的操作:对象的添加.移除.替换. 两个对象的交换等
- 电子检票过杆
- 1045. 快速排序(25)
- Jsp传来的String转int失败
- 剑指offer:(6)查找和排序:旋转数组中的最小值
- 简单servlet容器的实现原理
- 第六节,用户交换,操作this.state对象
- 对MQ的浅显理解
- [Application]Failed to instantiate the default view controller for UIMainStoryboardFile 'Main' ...
- jsp不能显示带有中文字符的图片
- 50个极好的bootstrap 后台框架主题下载
- 好用的QT内存分析工具Valgrind
- HTML CSS + DIV实现局部布局
- 模拟实现智能指针
- Android近期学习总结