React组件绑定this的四种方式
题图 By HymChu From lnstagram
用react进行开发组件时,我们需要关注一下组件内部方法this的指向,react定义组件的方式有两种,一种为函数组件,一种为类组件,类组件内部可以定义一些方法,这些方法的this需要绑定到组件实例上,小编这里总结了一下,一共有四种方案:
第一种方案,在构造函数内部使用bind绑定this,这样做的好处是,避免每次渲染时都要重新绑定,代码如下:
import React, {Component} from 'react'
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
this.handleClick = this.handleClick.bind(this)
}
handleClick (e) {
console.log(this.state.message)
}
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)
}
}
第二种方案同样是用bind,但是这次不再构造函数内部使用,而是在render函数内绑定,但是这样的话,每次渲染都需要重新绑定,代码如下:
import React, {Component} from 'react'
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
handleClick (name, e) {
console.log(this.state.message + name)
}
render () {
return (
<div>
<button onClick={ this.handleClick.bind(this, '赵四') }>Say Hello</button>
</div>
)
}
}
第三种方案是在render函数中,调用方法的位置包裹一层箭头函数,因为箭头函数的this指向箭头函数定义的时候其所处作用域的this,而箭头函数在render函数中定义,render函数this始终指向组件实例,所以箭头函数的this也指向组件实例,代码如下:
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
handleClick (e) {
console.log(this.state.message)
}
render () {
return (
<div>
<button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
</div>
)
}
以上这种方式有个小问题,因为箭头函数总是匿名的,如果你打算移除监听事件,是做不到的,那么怎么做才可以移除呢?看下一种方案。
第四种方案,代码如下:
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
}
handleClick = (e) => {
console.log(this.state.message)
}
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)
}
}
不过,在Classes中直接赋值是ES7的写法,ES6并不支持,你有两种选择,一种是配置你的开发环境支持ES7,一种使采用如下方式,下面这种方式是第四种方案的另外一种写法,代码如下:
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {message: 'Allo!'}
this.handleClick = (e) => {
console.log(this.state.message)
}
}
render () {
return (
<div>
<button onClick={ this.handleClick }>Say Hello</button>
</div>
)
}
以上便是react组件内部方法this绑定的四种方案,如果还有其它方案欢迎留言。
资料引用:
https://blog.csdn.net/sinat_17775997/article/details/56839485
更多干货关注下方公众号
欢迎关注、转发、点击好看
React组件绑定this的四种方式的更多相关文章
- jQuery绑定事件的四种方式:bind、live、delegate、on
1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...
- SWT组件添加事件的四种方式
在我们CS日常开发过程中会经常去为组件添加事件,我们常用的为AWT与SWT.SWT的事件模型是和标准的AWT基本一样的.下面将按照事件的四种写法来实现它. 一.匿名内部类的写法 new MouseAd ...
- React组件绑定this的三种方法
我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理. 节点上使用bind绑定 特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性 ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- jQuery绑定事件的四种方式区别
jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...
- React 组件条件渲染的几种方式
一.条件表达式渲染 (适用于两个组件二选一的渲染) render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> ...
- Webform中Repeater控件--绑定嵌入C#代码四种方式
网页里面嵌入C#代码用的是<% %>,嵌入php代码<?php ?> 绑定数据的四种方式: 1.直接绑定 <%#Eval("Code") %> ...
- jQuery绑定事件的四種方式
这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...
- ASP.NET MVC之下拉框绑定四种方式(十)
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
随机推荐
- 《算法竞赛入门经典》学习笔记 2.4.4 C++中的输入输出
2.4.3 64位整数输入输出long long除了cin,cout,也可以借助于printf和scanf语句,但对应的占位符缺是和平台与编译器相关的:在Linux中,gcc很同意的用%lld:在Wi ...
- php做图片上传功能
今天来做一个图片上传功能的插件,首先做一个html文件:text.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- MYSQL常用命令(转载)
1.导出整个数据库 mysqldump -u 用户名 -p --default-character-set=latin1 数据库名 > 导出的文件名(数据库默认编码是latin1)mysqldu ...
- jquery remove() detach() empty()三种方法的区别
remove方法把事件删除掉了,数据并没有删除 detach方法保存了事件和数据 empty方法保留了元素本身,移除子节点,删除内容 举例: <!DOCTYPE html><html ...
- 进击的RecyclerView入门三(要是能拖动就好了)
还是接着上一讲"进击的RecyclerView入门二(来点小装饰?)",在上一讲中我们学到了怎么给不同的Item定制不同的外观,但貌似那个蓝色的框实在太丑了,咱还是把它干了吧. @ ...
- Python巨蟒全栈开发目录
巨蟒python全栈开发-第一阶段 基础数据类型&基础 1.什么是计算机&&python的简介(待补充) 2.while循环&&格式化输出&&运 ...
- Content-Negotiation Header Quality Values
HTTP: The Definitive Guide 17.3.2 Content-Negotiation Header Quality Values The HTTP protocol define ...
- VI乱码, cat 和 more正常
今天在做一个东西的时候发现,vi乱码,cat,more这个文件汉字显示也正常,查了网上很多东西最后发现按一种说法改对了: 应该是格式化的问题! 比如man手册的文件有一些格式标记,你用man ,c ...
- 4.2 - MySQL
一.表关系 请创建如下表,并创建相关约束 班级表:class 学生表:student cid caption grade_id sid sname gender class_id 1 一年一班 1 1 ...
- 用hashlib生成动态token
生成token: import timeimport hashlib token ='jdhfvasuiodfbhsjdbvaio' client_time = time.time() client_ ...