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. Java复习篇3---基础概念

    关键字 关键字:被Java赋予了特定含义的英文单词 关键字的字母全是小写 常用的代码编辑器,针对关键字会有特殊的颜色标记,非常直观 例如: class: 用于(创建\定义)一个类,后面紧跟类名. 类是 ...

  2. git修改历史提交的备注信息

    1 git checkout '版本分支号' && git rebase -i 5bce64d^ (或者 git  rebase -i HEAD ~4)    //5bce64d  是 ...

  3. Power shell 读取电量,改变屏幕亮度

    1. Get-Wmiobject  -List win32*  # 列出所有win32_信息(基本的BIOS,Battery , Memory, processor) 2.Get-WmiObject ...

  4. 使用 WSDL 指定的标准 SOAP 消息格式

    为 XML 文档(定义 Web 服务)定义架构的行业标准 Web 服务描述语言 (WSDL) 提供了两个主要的 SOAP 格式设置选项.这两个选项均在 XML 元素中指定,而不在主 WSDL 命名空间 ...

  5. Create React App 安装时出现的错误解决方法

    安装很简单 创建一个文件夹  xxx 第一步:npx create-react-app my-app 第二部:cd my-app 第三部:npm start 安装时出现的错误  一 解决方案 一: 全 ...

  6. python APScheduler用法

    参考: https://blog.csdn.net/weixin_44799217/article/details/127353134 https://blog.csdn.net/weixin_428 ...

  7. robots.txt 文件说明

    robots其实就是指Robots协议,Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过 ...

  8. Java pom阿里云插件

    <pluginRepositories> <pluginRepository> <id>alimaven spring plugin</id> < ...

  9. pyg安装

    pyg官网:pytorch_geometric documentation (pytorch-geometric.readthedocs.io) win安装pyg各种报错,原因在于pytorch和py ...

  10. thirty-two(模型点击展示)react-three-fiber

    模型点击蒙版展示 点击展示目的(用户需要看见模型中更加多的内容信息) 使用技术 ThreeJs.React-three-fiber.React-three-drei.React.css 整体思路:   ...