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. H5移动端跳转唤起QQ在线客服与跳转支付宝

    以下两段代码都是找了很久的,在某个删库跑路的支付商那里找到的! H5移动端跳转QQ 实现在线客服 <a href="mqqwpa://im/chat?chat_type=wpa& ...

  2. idea快捷的输出常用语句

    sout:System.out.println(); psvm:public static void main(String[] args) {}

  3. 如何将视频作为Windows桌面动态壁纸,两步就可以搞定!

    Windows本身自带的设置是不支持直接将视频用作壁纸,所以要想实现这个功能需要第三方工具的帮助 一.软件简介 这是一款可以将视频文件作为动态壁纸展示在电脑桌面的软件,它体积小巧,占用资源也不多,相比 ...

  4. SpringBoot-集成PageHelper及使用

    1.添加依赖 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId& ...

  5. Lubuntu 18.04 自动登录

    参考文章:https://blog.csdn.net/qq_20965753/article/details/61420431 sudo nano /usr/share/lightdm/lightdm ...

  6. Windows 批量测试 ip:port 是否通畅

    使用 telnet + cmd 脚本处理: @echo off start cmd /k "telnet 10.2.3.29 3000" start cmd /k "te ...

  7. <CONTAINING_RECORD宏>引发的<结构体深度剖析(内存对齐,对齐参数,偏移量)>

    什么是结构体内存对齐?为什么要对齐?怎样对齐? 结构体内存对齐:元素是按照定义顺序一个一个放到内存中去的,但并不是紧密排列的. 从结构体存储的首地址开始,每个元素放置到内存中时,它都会认为内存是按照自 ...

  8. 【BOOK】数据存储--MongoDB

    MongoDB存储 1.链接MongoDB        指定数据库        指定集合 import pymongo ## 连接数据库 client = pymongo.MongoClient( ...

  9. Python学习的第二次总结

    有限循环 for   i   in range()# i自动加一   # for语句中若有break被执行,则跟着for后面的else语句就不会被正常执行:反之亦然 for i in range(3) ...

  10. win10系统解决启动虚拟机蓝屏问题

    1.查看电脑是否开启了虚拟化,如果没起开开启 CTR+SHIFT+Esc 2.是否开启了虚拟化选项 win+r 输入 OptionalFeatures