react学习笔记(二)
在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如: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学习笔记(二)的更多相关文章
- React学习笔记(二) 组件状态
组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getIni ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
随机推荐
- 001——使用composer安装ThinkPHP5
composer create-project topthink/think tp5 --prefer-dist
- Win10系列:C#应用控件基础10
PasswordBox控件 在应用程序的登录界面中,有时需要用户输入用户名和密码进行身份验证,应用程序中的密码框可以通过使用PasswordBox控件来实现.PasswordBox控件与TextBox ...
- HttpsessionListener 实现在线人数统计
最近在学servlet jsp,用的林信良先生的 jsp&servlet 这本书,在第五章有道在线人数统计的课后题完成,做一次记录. 实际效果: 一:用户类: package cc.openh ...
- JAVA条件语句:if;switch case
if(布尔表达式) { //如果布尔表达式为true将执行的语句 } 如果布尔表达式为true 执行里面的代码 if...else语句: if(布尔表达式){ //如果布尔表达式的值为true } ...
- 弹性布局(Flex布局)整理
一. 弹性布局 一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下. 在平时的我们常用的布局类型有以下几种: 1.浮动+定 ...
- SpringBoot的学习【2.分析HelloWorld的依赖】
1.分析引入的父类项目 引入的父类如下. 点击进去发现又引入了一个父类 点击进去发现是spring的版本控制和相应的依赖. so~这就是springboot的终极大包.想用springboot开发的时 ...
- win10下VM 中centos 安装共享文件
一. 安装VMware Tools VMwareTools的安装脚本是要使用到perl的,而CentOS 6自身不带perl,所以需要自己安装.可以自己下载源代码编译,也可以直接用yum来安装. y ...
- Nginx安装详细指南
nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有g ...
- python:文件的逐行操作
逐行遍历文件: 方法一:一次读入,分行处理: readlines() 缺点:一次读入所有信息,对于大文件来说会消耗很多计算机内存 fname = input('请输入要打开的文件名称:') fo = ...
- Spring Boot 非常好的学习资料
from@https://gitee.com/didispace/SpringBoot-Learning Spring Boot 2.0 新特性学习 简介与概览 Spring Boot 2.0 正式发 ...