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. minio对象存储集群安装

    环境:centos7.6 .两台服务器部署4个节点集群 minio简介: MinIO 是一个基于Apache License v2.0开源协议的对象存储服务.它兼容亚马逊S3云存储服务接口,非常适合于 ...

  2. Tiup离线安装TIDB集群4.0.16版本

    环境:centos7.6 中控机:8.213.8.25(内网) 可用服务器8.213.8.25-8.213.8.29 一.准备 TiUP 离线组件包 方法1:外网下载离线安装包拷贝进内网服务器 在Ti ...

  3. 【Java】取n工作日后的日期(仅排除周六周日)

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.time.*; import java. ...

  4. vue用echarts不显示

    在html页面中套vue的情况来使用echarts,或者单独vue使用echarts,出现页面不渲染图表,代码渲染有的情况,加个this.$nextTick(()=>{})让他主动渲染一下就可以 ...

  5. webpack的加载器兼容配置一览

    "devDependencies": { "css-loader": "^3.2.1", "file-loader": ...

  6. c、c++字符串匹配

    fnmatch(pattern, str, FNM_NOESCAPE)   头文件:https://github.com/gcc-mirror/gcc/blob/master/include/fnma ...

  7. (0828)【vivado版本-对仿真工具版本要求】

    (1)https://blog.csdn.net/Alonger1988/article/details/120506385 vivado,vsim版本兼容问题 (2)版本匹配:http://deng ...

  8. websphere+IHS+plugin集群搭建

    配置:wa1+was2 was1:Dmgr app01 oracle  ihs was2:Dmgr app02 原理:通过Dmgr管理下面两个agent,再通过agent去间接控制运行在节点上的ser ...

  9. [部署日记]Android Studio在同步Gradle的时候提示Could not resolve com.android.tools.build:gradle:7.0.4

    一波未平一波又起,好家伙直呼好家伙. 问题来源: 在想好APP起什么名字,放哪里后,打开模拟器准备着手处理时发现, Gradle sync出问题了... "Build"窗口提示: ...

  10. 调度器45—wake_affine

    基于 Linux-5.10 一.wake_affine 简介 1. 背景 在进程唤醒选核路径中, wake_affine 倾向于将被唤醒进程(wakee)尽可能安排在 waker所在 CPU 上, 这 ...