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. #Cisco——配置链路聚合

    Cisco--配置链路聚合 一.什么是链路聚合. 链路聚合(英语:Link Aggregation)是一个计算机网络术语,指将多个物理端口汇聚在一起,形成一个逻辑端口,以实现出/入流量吞吐量在各成员端 ...

  2. 常用的基础方法,对象转数组,phpcurl请求

    /** * CURL方法 * @param type $url * @param type $https * @param type $method * @param type $data * @re ...

  3. 苹果App 上架 app store 提示 “一张或多张屏幕快照的尺寸存在错误“

    获取预览图的方式有两种:第一种是用真机运行然后截图获取:另一种是用模拟器运行然后截图获取. 先说说第一种获取方式:app运行在5.5英寸(6+)的手机上,截取屏幕快照.在上传时会报错:"一张 ...

  4. 高校github课程资源汇总

    序号 学校名称 学校类型 课程资源链接 1 清华大学 Top 计算机系课程攻略 https://github.com/Salensoft/thu-cst-cracker https://github. ...

  5. Java中静态方法和实例方法

    static修饰的方法可以直接用方法名.    访问 实例成员方法必须永实例成员调用

  6. c--> #define 定义宏

    #define 定义宏 宏(Macro)是预处理命令的一种,它允许用一个标识符来表示一个字符串 1.有关定义宏的代码末尾不需要添加":"(分号) 2.定义宏define在计算的式子 ...

  7. Linux 第四节(shell脚本,IF,do,for)

    Shell脚本 1.批处理式: 2.交互式: 脚本声明   #!/bin/bash 脚本注释   #fakba;kb 脚本命令   ls pwd bash test.sh   //执行test.sh脚 ...

  8. (原创)odoo one2many字段以子列表形式显示

    模块详情

  9. (0514)python学习-思维导图

  10. insert_base_x.txt

    insert into g_temp.test_basevalues('20220202'::date, 1, 'apple'),('20220203'::date, 5, 'banana'),('2 ...