在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如: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. VSTO:使用C#开发Excel、Word【16】

    使用工作表对象Worksheet对象表示Excel工作簿中的工作表.Worksheet有一个Name属性,返回工作表的名称(例如“Sheet1”). 工作表管理Worksheet对象具有一个Index ...

  2. Android开发 ---基本UI组件4:拖动事件、评分进度条、圆圈式进度条、进度条控制

    Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...

  3. go 语言如何跨平台编译

    以evio源码的分析来说明: 我们看到在有些文件的头部有这样一个标识:文件链接:https://github.com/tidwall/evio/blob/master/evio_unix.go // ...

  4. JAVA学习笔记系列3-JVM、JRE和JDK的区别

    JVM(Java Virtual Machine)就是一个虚拟的用于执行bytecode字节码的“虚拟计算机”.它和os打交道 JRE(Java Runtime Environment)包含:Java ...

  5. vscode下调试运行c++

    vscode是微软的最新产品,轻量易用,最初是前端用的多,尤其是typescript,因为vscode的作者也是typescipt作者.一般c++的IDE很多,比如visual studio等,但是都 ...

  6. centos7.4 分区 格式化

    1. 查看磁盘 [root@yzb-centos72-3 ~]# fdisk -l Disk /dev/vda: 32.2 GB, 32212254720 bytes, 62914560 sector ...

  7. 11--Python入门--面向对象

    面向对象是Python的特点.面向对象主要通过类class的定义来实现.类class是用来描述具有相同属性和方法的对象的集合.类定义了该集合中的每个对象的共有属性和方法可以将类理解为一个模块,模块中包 ...

  8. Spring 的介绍和目标

    1. Spring介绍 打开Spring 官网查看对 Spring 的介绍和目标 http://www.springsource.org/about We believe that: · J2EE s ...

  9. svn同步小脚本

    企业中难免会有使用svn 的怎么给svn做好备份呢 下面是用两个脚本进行同步和监控 同步脚本: #!/bin/bash i=1 while true do if [ $(expr $i % 12) = ...

  10. 百战程序员9- IO流

    1.IO是什么意思? data source是什么意思? IO:输入输出 data source:数据源 2.字节流和字符流有什么区别?输入流和输出流有什么区别? 分类 3.节点流和处理流有什么区别? ...