1. 推荐:使用class的实例方法

class Hello extends React.Component {
handleClick = () => {
this.setState({ ... })
}
}

2. 箭头函数

<button onClick={() => { this.handleClick() }} />

3. bind

constructor () {
super()
this.handleClick = this.handleClick.bind(this)
}

React 事件绑定this指向的更多相关文章

  1. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  2. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

  3. react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

    在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes ...

  4. React事件绑定的方式

    一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...

  5. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  6. react 事件绑定 es5/es6

    // vscode shift + ctrl + v 预览 es 5 写法 无参函数的绑定 first methods 定义函数: handleClick(e) { // e - 事件对象 e.pre ...

  7. react事件绑定,事件传参,input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

  8. React事件绑定几种方法测试

    前提 es6写法的类方法默认没有绑定this,不手动绑定this值为undefined. 因此讨论以下几种绑定方式. 一.构造函数constructor中用bind绑定 class App exten ...

  9. react 事件绑定的2种常用方式

    方式一:传统 import React, { Component } from 'react'; class App extends Component { handleSubmit (e, args ...

  10. 最正确的React事件绑定方式

    参考这篇文章:Choosing the Best Approach for React Event Handlers 1.function.bind()方式 2.inline arrow functi ...

随机推荐

  1. 粉色的猫MISC(bugku)

    一  题目描述 ps:本题特别感谢树叶大佬给的一些提示以及WP!欢迎大家关注树木有点绿~~ 二 解题过程 下载附件得到zip压缩包 根据作者提示,压缩包注释应该为压缩包密码. 1.压缩包密码 一开始看 ...

  2. 通过pxelinux引导管理器网络引导slax linux

    前提条件 1.用于引导服务器具备tftp服务和http服务: 2.使用syslinux项目下lpxelinux.0做为pxe引导文件,原因:测试发现lpxelinux.0对http协议支持更好,可以更 ...

  3. 开启MySQL数据库远程连接

    为了使其余用户/计算机能访问SQL数据库,需对SQL Server进行以下配置.有以下两种方法: 方法一:bat命令修改. 新建.txt文件,添加以下内容,保存后再修改为.bat,双击.bat文件. ...

  4. 下载接口时出现:Try to run this command from the system terminal. Make sure that you use the correct version of 'pip' installed for your Python interpreter located at 'D:\python\demo\venv\Scripts\...的错误

    下载接口时出现:Try to run this command from the system terminal. Make sure that you use the correct version ...

  5. PHP_单例模式、实例代码

    在PHP中实例化一个对象,就会新开辟一个新内存空间,当一些业务要实例化多个对象时,会占用大量内存.这个问题可以用单例模式解决. 我们实例化对象可以直接new出来,也可以通过类中的构造函数  __con ...

  6. Windows Terminal 中 WSL2 默认打开路径

    打开Windows Terminal.鼠标点击进入设置,或者同时按ctrl和逗号.找到如下内容: { "guid": "{07b52e3e-de2c-5db4-bd2d- ...

  7. postgresql 学习链接

    1.菜鸟教程:https://www.runoob.com/postgresql/postgresql-operators.html 2.易百教程:https://www.yiibai.com/pos ...

  8. VMware Workstation Ubuntu 20.04 LTS无法连接网络问题

    本文记录了自己使用的安装在VMware Workstation上的Ubuntu20.04无法连接到网络的解决过程--终于解决困扰我两个小时的问题 出现问题# 毫无征兆,平时使用正常的Ubuntu在今天 ...

  9. 记录一次在deepin安装node版本管理工具nvm的过程

    安装nvm sudo apt-get install git -y # 安装git cd /home # 随便找个目录放代码 git clone https://github.com/nvm-sh/n ...

  10. Winform 在高分变率显示器中窗体变模糊配置方式

    我们知道  Winform 前身与 XP 系统 同一时代出生 , 那时候显示器还是LCD 和 大头机 ,显示器普遍  96 DPI  . 随着显示器质量改善,2K 屏, 4K屏普及,DPI 达  19 ...