在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。

绑定事件处理函数this的几种方法:

第一种方法:

run(){

alert(this.state.name)
}
<button onClick={this.run.bind(this)}>按钮</button>

第二种方法:

构造函数中改变

this.run = this.run.bind(this);

run(){

alert(this.state.name)
}
<button onClick={this.run>按钮</button>

第三种方法:

run=()=> {
alert(this.state.name)
}

<button onClick={this.run>按钮</button>

带参数的方法:

在用箭头函数的基础上用bind绑定this和要传的参数

<button onClick={this.run.bind(this,xx)>按钮</button>

react学习笔记(二)的更多相关文章

  1. React学习笔记(二) 组件状态

    组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getIni ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  4. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  5. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  6. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  7. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

  8. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

  9. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

随机推荐

  1. asp.net针对SQLSERVER数据库备份和恢复的一揽子问题解决

    一.备份 先备份到服务端,用gridview显示出来,点击可以下载到本地 二.恢复 这是很麻烦的事情,本人查阅不少资料,耗费不少时间才搞定. 直接恢复数据库时不行的,会提示数据库正在使用,恢复失败等信 ...

  2. 从0到有,虚拟机安装centos,然后ssh连接虚拟机

    安装centos 1.下载centos镜像 https://mirrors.aliyun.com/centos/6.8/isos/x86_64/CentOS-6.8-x86_64-bin-DVD1.i ...

  3. day72 关于rbac组件的小部分面试题

    rbac的权限组件   基于角色的权限控制 1.什么是权限? url代表的就是一个权限 2.如何实现权限的控制? 表结构  以我们讲的课的内容为例 菜单表: - title 标题 - icon 图标 ...

  4. 如何ASP.NET Core Razor中处理Ajax请求[转载]

    在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过. 今天闲来无事,准备用Rozor做个项目熟练下,结果写第一个页面就卡住了..折腾半天才搞好 ...

  5. JavaScript 之 DOM

    1. DOM DOM:Document Object Model 文档对象模型,定义访问和操作结构化文档(HTML)的方式. 在 HTML DOM (Document Object Model) 中 ...

  6. radhat 添加用户,组,shell,附加组,家目录

    linux下强制踢掉登陆用户 查看机器中登陆的用户 [root@sunsyk ~]# w 16:29:02 up 2 days, 2:35, 5 users, load average: 0.03, ...

  7. componentWillMount和componentDidMount的区别

    1.componentWillMount  将要装载,在render之前调用: componentDidMount,(装载完成),在render之后调用 2.componentWillMount  每 ...

  8. C# 异步通信 网络聊天程序开发 局域网聊天室开发

    Prepare 本文将使用一个NuGet公开的组件技术来实现一个局域网聊天程序,利用组件提供的高性能异步网络机制实现,免去了手动编写底层的困扰,易于二次开发,扩展自己的功能. 在Visual Stud ...

  9. MVVM设计模式加RAC响应式编程

    一:为什么要用MVVM? 为什么要用MVVM?只是因为它不会让我时常懵逼. 每次做完项目过后,都会被自己庞大的ViewController代码吓坏,不管是什么网络请求.networking data ...

  10. C++ 跨语言调用 Java

    C++ 跨语言调用 Java Java JDK 提供了 JNI 接口供 C/C++ 程序调用 Java 编译后的类与方法,主要依赖于头文件(jni.h) 和 动态库(jvm.so/jvm.dll),由 ...