下面内容代码使用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 操作事件、状态改变、路由的更多相关文章

  1. MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件

    原文  MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件 UI 前沿技术 WPF 中的多点触控操作事件 Charles Petzold 下载代码示例 就在过去几年,多点触控还只是科幻电 ...

  2. javascript 中状态改变触发事件

    转 有限状态机:是一个非常有用的模型,可以模拟世界上大部分事物. 它有三个特征: * 状态总数(state)是有限的. * 任一时刻,只处在一种状态之中. * 某种条件下,会从一种状态转变(trans ...

  3. iOS:使用代理模式监听开关状态改变事件

    记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...

  4. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

  5. jquery的api以及用法总结-数据/操作/事件

    数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...

  6. 关于页面数据未保存改变路由(beforeunload,beforeRouteLeave)

    一下内容为笔者个人理解,如有出入还请大佬指出不胜感激 页面有数据未保存,用户离开页面分为两种 1 . 直接关闭浏览器标签 或者点击浏览器后退按钮 离开当前页面 2. 在页面内改变路由,或则刷新页面(不 ...

  7. 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性

    [源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...

  8. WPF路由事件二:路由事件的三种策略

    一.什么是路由事件 路由事件是一种可以针对元素树中的多个侦听器而不是仅仅针对引发该事件的对象调用处理程序的事件.路由事件是一个CLR事件. 路由事件与一般事件的区别在于:路由事件是一种用于元素树的事件 ...

  9. stat file 查看文件的 最新的被访问时间 最近的修改时间 最近的状态改变时间

    [root@NB ~]# stat /media/6FE5-D831/git-data/IT-DOC/web收藏.txt File: `/media/6FE5-D831/git-data/IT-DOC ...

随机推荐

  1. 字符串处理总结之二(C#StringBuilder类)

    动态串StringBuilder 与String类相比,System.Text.StringBuilder类可以实现动态字符串.此外,动态的含义是指在修改字符串时,系统不需要创建新的对象,不会重复开辟 ...

  2. Try to write a script to send e-mail but failed

    #-*-coding: utf-8 -*- '''使用Python去发送邮件但是不成功,运行后,等待一段时间, 返回[Errno 10060] A connection attempt failed ...

  3. nuget 服务器

    https://nuget.cnblogs.com/v3/index.json http://nuget.lzzy.net/api/v2 https://www.nuget.org/api/v2/ h ...

  4. easyX最新版在VS2015上的问题解决啦啦

    7.10 修改完easyX的路径,只剩下一个问题 []无法解析的外部符号_iob_func,该符号在函数“”中被引用 []1个无法解析的外部命令 原因: 版本的问题,代码已经编译过了,但是是2012版 ...

  5. (十三)Packet socket 和 sockaddr_ll

    描述        本文简单描述了数据链路层的socket使用的两种方法正文     Linux下有两种方式接收数据链路层的数据包:    (1)原始的方法,即创建一个类型为SOCK_PACKET的s ...

  6. OneProxy安全策略

    set gaccess <groupname> <level> 注意事项– 级别0:没有限制– 级别1:禁止DDL– 级别2:必须要有where条件– 级别4:禁止Delete ...

  7. Result Maps collection already contains value for

    Result Maps collection already contains value for select s.id,s.branch_name from t_wx_shop s left jo ...

  8. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  9. js倒计时跳转页面

    var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...

  10. 斐讯k1路由器刷Breed BootLoader(不死UBoot)教程

    刷入Breed BootLoader: 因为这个K1路由器可以开启telnet服务,所以此处刷Breed可以不使用编程器刷Flash芯片的方法进行. 1.打开K1路由器的Telnet服务. 电脑通过有 ...