React 入门学习笔记整理(四)—— 事件
1、事件定义
React事件绑定属性的命名采用驼峰式写法,而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
在类组件中定义函数,通过this.函数名去调用
class GreateH extends React.Component{
static defaultProps = {name:'CoCo'};
handler(){
console.log("click");
}
render(){
return <div>
<h2 onClick={this.handler}>hello,{this.props.name}</h2>
</div>
}
}
2、this指向
按照第一步中的写法,在handler函数中打印出当前的this:
此时this不指向实例,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handler 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
1)使用bind函数改变this指向
class GreateH extends React.Component{
static defaultProps = {name:'CoCo'};
//在类里直接写成箭头函数
handler(){
console.log("click");
console.log(this);
};
render(){
return <div>
<h2 onClick={this.handler.bind(this)}>hello,{this.props.name}</h2>
</div>
}
}
但是这种render渲染时每次会重新绑定,所以可以写成以下这种:
class GreateH extends React.Component{
constructor(props){
super(props);
//初始化时改变this的指向,给实例添加一个方法,this.handler.bind(this)会返回一个新的函数
this.handler = this.handler.bind(this);
}
static defaultProps = {name:'CoCo'};
handler(){
console.log("click");
console.log(this);
};
render(){
return <div>
<h2 onClick={this.handler}>hello,{this.props.name}</h2>
</div>
}
}
2)写在类中的函数直接写成箭头函数
class GreateH extends React.Component{
static defaultProps = {name:'CoCo'};
//在类里直接写成箭头函数
handler = () => {
console.log("click");
console.log(this);
};
render(){
return <div>
<h2 onClick={this.handler}>hello,{this.props.name}</h2>
</div>
}
}
this在控制台打印出来:
3)这里还有一种写法,回调函数中使用 箭头函数:
class GreateH extends React.Component{
static defaultProps = {name:'CoCo'};
//在类里直接写成箭头函数
handler (){
console.log("click");
console.log(this);
};
render(){
return <div>
<h2 onClick={(e)=>this.handler(e)}>hello,{this.props.name}</h2>
</div>
}
}
并不推荐第三种写法,因为每次在GreateH 组件渲染的时候,都会创建一个不同的回调函数,。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染,为了避免性能问题,推荐使用上面两种方式。
3、事件传参
React 入门学习笔记整理(四)—— 事件的更多相关文章
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- React 入门学习笔记整理(五)—— state
1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,set ...
- React 入门学习笔记整理(六)—— 组件通信
1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...
- React 入门学习笔记整理(九)——路由
(1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. Re ...
- React 入门学习笔记整理(一)——搭建环境
使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...
- React 入门学习笔记整理(二)—— JSX简介与语法
先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...
- React 入门学习笔记整理(三)—— 组件
1.定义组件 1)函数组件 function GreateH(props){ return <div> <h2>hello,{props.name}</h2> &l ...
- React 入门学习笔记整理(七)—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
- React 入门学习笔记整理(八)—— todoList
APP.js import React, { Component,createRef,Fragment} from 'react'; import Todos from './components/t ...
随机推荐
- WHU1124 Football Match
http://acm.whu.edu.cn/learn/problem/detail?problem_id=1124 题目大意:有N支球队,你们是第N支.每个队伍已经有一些分数了,接下来还有M场比赛. ...
- 解决“UnicodeEncodeError: 'gbk' codec can't encode character u'\xa9' in position 24051: illegal multibyte sequence”错误
今天我在爬取一个网页时出现了下面这个错误: UnicodeEncodeError: 'gbk' codec can't encode character u'\xa9' in position 240 ...
- react小知识
概述 有句话说得很好,代码是写给人看的,顺便让机器执行而已.所以我总结了一些写react不太注意的地方,供以后开发时参考,相信对其他人也有用. 组件封装 由于组件其实就是React.createEle ...
- webpack热加载:修改文件自动刷新浏览器并更新
概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...
- Android 开发工具推荐
简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家.: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你 ...
- 天了噜,Java 8 要停止维护了!
前些天的中兴事件,已经让国人意识到自己核心技术的不足,这次的 JDK 8 对企业停止免费更新更是雪上加霜.. 以下是 Oracle 官网提示的 JDK8 终止更新公告. 原文内容:Oracle wil ...
- laravel5.5 __construct函数 无法使用session() 解决方法和实例
从网上查询资料得知,在laravel中使用__construct方法的时候,session还没开启,此时就需要用到中间件来解决. $this->middleware(function ($req ...
- 测试工具之RobotFramework安装
Robot Framework很多公司再用,图形化界面,类表格填写关键字和参数,几乎不需要编码知识,上手很快 最近看到某满公司使用的就是这个工具,特地看了下,确实很简单,对于初入测试行业的人来说是个很 ...
- FTP上传心得
最近出了一个问题就是在本地上传FTP没有一点问题 可是部署到服务器上.上传的时候总是false.解决办法 ftp.enterLocalPassiveMode();boolean storeFile = ...
- python常用库 - NumPy 和 sklearn入门
Numpy 和 scikit-learn 都是python常用的第三方库.numpy库可以用来存储和处理大型矩阵,并且在一定程度上弥补了python在运算效率上的不足,正是因为numpy的存在使得py ...