import React from 'react';
import PropTypes from 'prop-types';
class Home extends React.Component{
render(){
return (
<div>
<h1>hello word</h1>
<button onClick={(event)=>this.TestMethod(event,"哈哈哈")}>
click me
</button>
</div>
)
}
//也可以用构造函数来表示this,如果用正常的函数体写的话,this是不能表示出来的,这里的this 指的是home 这个类,因为箭头函数没有作用域
TestMethod=(e,arg1)=> {
console.log('e is :',e);
e.preventDefault();
console.log('链接被点击');
console.log('this is :',this);
console.log(arg1);
}
} Home.ProtoTypes={
sex:PropTypes.number
}
export default Home;

react 中事件参数和一般参数以及this绑定的写法的更多相关文章

  1. react 中刷新,路由传参数丢失不存在了?

    你可能在Link to没写state {{pathname:'/report',state:{storageClear:this.state.storageClear}}}

  2. react中事件的使用

    import React from 'react' class Home extends React.Component{ constructor(props){ super(props) this. ...

  3. react.js 从零开始(五)React 中事件的用法

    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...

  4. react中事件冒泡之填坑

    今天在写个组件,大致代码是这样的: class Switch extends React.Component { handlerChange = (e) => { const {onChange ...

  5. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  6. Linux中inotify软件部署及参数事件演示

    声明:博主使用的是CentOS6.9的系统 参考资料: https://github.com/rvoicilas/inotify-tools/wiki http://www.ibm.com/devel ...

  7. jQuery中Ajax事件beforesend及各参数含义1

    jQuery中Ajax事件beforesend及各参数含义 转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有 ...

  8. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  9. React中如何优雅的捕捉事件错误

    React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...

随机推荐

  1. Mac下安装配置gradle

    1.下载gradle2.解压3.获得gradle解压后的路径4.修改.bash_profile文件,配置环境变量 vi ~./bash_profile export GRADLE_HOME=/User ...

  2. Git利用命令行提交代码步骤

    利用命令行提交代码步骤进入你的项目目录1:拉取服务器代码,避免覆盖他人代码git pull2:查看当前项目中有哪些文件被修改过git status具体状态如下:1:Untracked: 未跟踪,一般为 ...

  3. git日常开发中的使用

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke 1.在远程新建一个仓库,可以使github.gitlib或者bitbucket,这里以bitbucke ...

  4. RD Client、TeamViewer连接主机

    一.使用RD Client连接远程桌面 1.设置本地主机 2.查看电脑ip 3.手机安装RD Client 应用商店下载 Microsoft Remote Desktop PC name填入查询到的I ...

  5. 2101 可达性统计(拓扑排序/dfs+状态压缩)

    [题目描述] 给定一张N个点M条边的有向无环图,分别统计从每个点出发能够到达的点的数量.N,M≤30000. [题目链接] 2101 可达性统计 [算法] 拓扑排序之后逆序计算(感觉dfs更好写而且应 ...

  6. 问题 H: 小k的简单问题

    问题 H: 小k的简单问题 时间限制: 1 Sec  内存限制: 128 MB提交: 107  解决: 57[提交] [状态] [命题人:jsu_admin] 题目描述 地图上有n个村庄,小k每个月需 ...

  7. P3379 【模板】最近公共祖先(LCA)(欧拉序+rmq)

    P3379 [模板]最近公共祖先(LCA) 用欧拉序$+rmq$维护的$lca$可以做到$O(nlogn)$预处理,$O(1)$查询 从这里剻个图 #include<iostream> # ...

  8. HTML导航框架实现

    导航栏界面(html_contents.html) <!DOCTYPE html> <html> <head> <meta charset=” utf-8” ...

  9. node+mysql+express实现登录/注册/修改密码/删除用户 接口

    实现用户的注册.登录.修改密码.删除用户操作 用到的数据库:nodecms:表:user 目录结构: db目录下存放数据库操作语句: userSQL.js 用户有关的操作语句 router目录 接口路 ...

  10. mssql 取数据指定条数(例:100-200条的数据)

    方法1:临时表 * into #aa from table order by time-- 将top m笔插入 临时表 select * from #aa order by time desc --d ...