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. JavaSE——封装

    封装概述 是面向对象三大特征之一(封装,继承,多态) 对象代表什么,就得封装对应的数据,并提供数据对应的行为 封装代码实现 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来 ...

  2. 网络图片转base64

    /**            * 网络图片转base64            * @param src            * @return            * @throws Excep ...

  3. 7、Taylor公式(泰勒公式)通俗+本质详解

    参考:https://zhuanlan.zhihu.com/p/392808684 1.比较通俗地讲解一下泰勒公式是什么. 泰勒公式,也称泰勒展开式.是用一个函数在某点的信息,描述其附近取值的公式.如 ...

  4. 2021-1-31 group class note

    Lesson aim By the end of this lesson, Ss will be able to talk about restaurant food using verbs of p ...

  5. CSDN上书签迁移

    title: CSDN上书签迁移 date: 2020-11-01 16:34:30 img: /photos/2020.6.03_15/2020_06_11_cover.jpg summary: C ...

  6. 我常用的Linux快捷命令

    alias 设置快捷自定义命令 语法: alias 快捷命令='完整命令' 因为可以直接把上述当成一条语句来执行,但是服务器重启之后会失效,被称为临时快捷命令: 但是!将他写入 ~/.bashrc 文 ...

  7. 003. html篇之《表单》

    html篇之<表单> 一.结构 <form action="url" method="post" name=""> ...

  8. 调度器30—调度相关结构体—p->flags

    一.PF_EXITING 1. 赋值路径 各驱动和内核机制中直接调用 SYSCALL_DEFINE1(exit, int, error_code) //exit.c do_exit(code); // ...

  9. Cleanest XMaster绿色解压最新版下载9.6密钥激活码

    cad安装报错换了好几个版本都不行,用这个卸载了一下,确实有用 Cleanest XMaster绿色版cad卸载工具分享下载 地址一(百度网盘) 地址二(直接下载) 9.6.05密钥:[AtrXShX ...

  10. Ios安装charles

    1.浏览器打开chls.pro/ssh,不会弹出下载证书,所以使用以下方式: 2. 然后打开设置,可以看到描述文件,安装 检查:在"设置"-"描述文件"-查看描 ...