D2.Reactjs 操作事件、状态改变、路由
下面内容代码使用ES6语法
一、组件的操作事件:
1、先要在组件类定义内定义操作事件的方法,如同event handler。若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法,代码如下:
handleClick() {
//TODO
}
2、在contructor 函数,bind(this)。
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
3、在render方法内,显式绑定事件
render() { return <div>
<button onClick={this.handleClick}>click</button>
</div>;
}
经过以上操作即会触发监听事件方法
二、组件状态state
组件,我理解其实就是wpf的控件,那么state就是wpf中的依赖属性了,其功能如依赖属性其中的功能很类似,state的改变会改变组件的UI变化或者进行一些逻辑操作。
1、设置初始状态,即在contructor函数上设置组件初始state,
constructor(props) {
super(props);
this.state = {
liked: false,
opacity: 1
};
}
2、在事件中可以利用setState()设置新的状态,如在handleclick事件改变state,如下:
handleClick() {
this.setState({ liked: !this.state.liked });
}
state改变后促使组件重新执行render(),进而改变了UI。
三、路由
reactjs可以使用单页面搭建整个网站或者APP,那么路由机制就十分需要,方便我们来实际一个页面来构建多个页面和页面的架构。React-Router是一个十分实用的官方插件,提供进行导航等操作。
1、安装插件
npm install -S react-router
2、使用
使用react-router 就像使用一般的插件,如下:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route,IndexRoute, Link, browserHistory, hashHistory } from 'react-router';
import App from './compoments/App';
import ABout from './compoments/ABout';
import Home from './compoments/Home';
render((<Router history={browserHistory}>
<Route path="/" component={App} >
<IndexRoute component={Home}/>
<Route path="/home" component={Home} />
<Route path="/about" component={ABout} />
</Route> </Router>), document.getElementById("container"));
其中App,Home,About 都是其他文件定义的组件。
Router的history属性设置是设置Router将使用哪种URL,例如使用hashHistory,路由的切换由URL的hash变化决定,即URL的#
部分发生变化,即上面访问about页面,URL路径将是localhost:8080/#/about;例如使用browserHistory,将会调用浏览器的URL,即访问about页面,URL路径将是localhost:8080/about。
更多Router参数设置可以去官网查看。
D2.Reactjs 操作事件、状态改变、路由的更多相关文章
- MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件
原文 MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件 UI 前沿技术 WPF 中的多点触控操作事件 Charles Petzold 下载代码示例 就在过去几年,多点触控还只是科幻电 ...
- javascript 中状态改变触发事件
转 有限状态机:是一个非常有用的模型,可以模拟世界上大部分事物. 它有三个特征: * 状态总数(state)是有限的. * 任一时刻,只处在一种状态之中. * 某种条件下,会从一种状态转变(trans ...
- iOS:使用代理模式监听开关状态改变事件
记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- jquery的api以及用法总结-数据/操作/事件
数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...
- 关于页面数据未保存改变路由(beforeunload,beforeRouteLeave)
一下内容为笔者个人理解,如有出入还请大佬指出不胜感激 页面有数据未保存,用户离开页面分为两种 1 . 直接关闭浏览器标签 或者点击浏览器后退按钮 离开当前页面 2. 在页面内改变路由,或则刷新页面(不 ...
- 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性
[源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...
- WPF路由事件二:路由事件的三种策略
一.什么是路由事件 路由事件是一种可以针对元素树中的多个侦听器而不是仅仅针对引发该事件的对象调用处理程序的事件.路由事件是一个CLR事件. 路由事件与一般事件的区别在于:路由事件是一种用于元素树的事件 ...
- stat file 查看文件的 最新的被访问时间 最近的修改时间 最近的状态改变时间
[root@NB ~]# stat /media/6FE5-D831/git-data/IT-DOC/web收藏.txt File: `/media/6FE5-D831/git-data/IT-DOC ...
随机推荐
- ACM HDU 2041--超级楼梯题解
超级楼梯 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- OpenCV2+入门系列(二):图像的打开、创建与显示(命令行)
前置知识:数字图像的简略知识 这里只是最基础的知识,上课如果稍微听了课的同学可以直接略过不不看. 彩色图像: 对于一副数字图像,对于一副RGB色彩空间的彩色数字图像,它一共有宽X高个像素格子,每个格子 ...
- java.lang.ExceptionInInitializerError /NoClassDefFoundError: [Lorg/hibernate/engine/FilterDefinition;
java.lang.ExceptionInInitializerError at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Nati ...
- Grafana + Zabbix --- 部署分布式监控系统
阅读目录: 1. 关闭防火墙 2. 安装Zabbix下载源 3. ZabbixClient --- 安装zabbix-agent代理 4. ZabbixServer --- 安装zabbix-ser ...
- MVC架构 使用FastReport
1.Web.config文件 添加配置 <httpHandlers> <add path="FastReport.Export.axd" verb="* ...
- 汇编语言写出的helloworld运行过程
一:首先说一点,这篇文章建立在懂一点汇编的基础上,有几个简单的命令,说以下: 1:-r命令 -r 查看寄存器 -r 寄存器 (如 -r AX) 修改寄存器的值: 2:-d命令 -d 地址:xxxx:x ...
- python 安装MySQLdb mysql_config not fount
缺少 libmysqlclient-dev 应该是安装MySQL的锅. 资料:http://www.cnblogs.com/xiazh/archive/2012/12/12/2814289.html ...
- goroutine
Go语言从诞生到普及已经三年了,先行者大都是Web开发的背景,也有了一些普及型的书籍,可系统开发背景的人在学习这些书籍的时候,总有语焉不详的感觉,网上也有若干流传甚广的文章,可其中或多或少总有些与事实 ...
- Forward和Redirect的区别
一:间接请求转发(Redirect) 二:直接请求转发(Forward) 用户向服务器发送了一次HTTP请求,该请求可能会经过多个信息资源处理以后才返回给用户,各个信息资源使用请求转发机制相互转发请求 ...
- IIS发布网站出现“未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项。”的解决方法
未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项.试图加载格式不正确的程序. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈 ...