方法一:最麻烦的写法,不推荐

  1. import React from 'react';
  2. class App extends React.Component {
  3. handleClick() {
  4. alert('点击')
  5. }
  6. render() {
  7. return (
  8. <div>
  9. <button onClick={this.handleClick.bind(this)}>click</button>
  10. </div>
  11. )
  12. }
  13. }
  14. export default App;

方法二:在构造函数里统一绑定,不常用。

  1. import React from 'react';
  2. class App extends React.Component {
  3. constructor(props) {
  4. super(props);
  5. this.handleClick = this.handleClick.bind(this)
  6. }
  7. handleClick() {
  8. alert('点击')
  9. }
  10. render() {
  11. return (
  12. <div>
  13. <button onClick={this.handleClick}>click</button>
  14. </div>
  15. )
  16. }
  17. }
  18. export default App;

方法三:最常见的写法。

  1. import React from 'react';
  2. class App extends React.Component {
  3. constructor(props) {
  4. super(props);
  5. }
  6. handleClick = () => {
  7. alert('点击')
  8. }
  9. render() {
  10. return (
  11. <div>
  12. <button onClick={this.handleClick}>click</button>
  13. </div>
  14. )
  15. }
  16. }
  17. export default App;

方法四:可以传参数。

  1. import React from 'react';
  2. class App extends React.Component {
  3. constructor(props) {
  4. super(props);
  5. }
  6. handleClick (e) {
  7. alert(e)
  8. }
  9. render() {
  10. return (
  11. <div>
  12. <button onClick={(e) => this.handleClick(e)}>click</button>
  13. </div>
  14. )
  15. }
  16. }
  17. export default App;

react绑定事件的几种写法的更多相关文章

  1. 无废话Android之常见adb指令、电话拨号器、点击事件的4种写法、短信发送器、Android 中各种布局(1)

    1.Android是什么 手机设备的软件栈,包括一个完整的操作系统.中间件.关键的应用程序,底层是linux内核,安全管理.内存管理.进程管理.电源管理.硬件驱动 2.Dalvik VM 和 JVM ...

  2. Android开发系列之按钮事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...

  3. Android开发系列之button事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的样例. 文件夹结构还是引用上篇blog的截图. 详细实现代码: public class MainActivity extends Activit ...

  4. React绑定事件动态化的实现方法

    一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...

  5. Android按钮事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...

  6. (转)Ext.Button点击事件的三种写法

    转自:http://maidini.blog.163.com/blog/static/377627042008111061844345/ ExtJs的写法太灵活了,现在收集了关于Button点击事件的 ...

  7. Android笔记---点击事件的四种写法

    Android 点击事件的四种写法: 1. 以内部类的形式实现 OnClickListener 接口.定义点击事件 class MainActivity extents Activity{ // .. ...

  8. Android中点击事件的四种写法详解

    Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法 ...

  9. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

随机推荐

  1. spark-submit 提交任务及参数说明

    spark-submit 可以提交任务到 spark 集群执行,也可以提交到 hadoop 的 yarn 集群执行. 1. 例子 一个最简单的例子,部署 spark standalone 模式后,提交 ...

  2. <javaScript>谈谈JavaScript中的变量、指针和引用

    1.变量我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢?事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中 ...

  3. LC 275. H-Index II

    Given an array of citations sorted in ascending order (each citation is a non-negative integer) of a ...

  4. ZooKeeper Lead选举

    前段时间学习了zookeeper,对其中比较难理解并且容易忘掉的知识点做一个记录~ 关键词: myId:表示在集群中,自身对应的id zxId:节点状态发生改变时,产生的一个时间戳,并且这个时间戳全局 ...

  5. centos6 安装docker

    docker 安装要求内核大于3.10 , 而centos6 机器上内核一般是2.6 , 除了升级内核外, 还可以安装低版本的docker , 本文介绍docker 1.7的安装. 机器 环境 [ro ...

  6. 分布式存储ceph部署(2)

    一.部署准备: 准备5台机器(linux系统为centos7.6版本),当然也可以至少3台机器并充当部署节点和客户端,可以与ceph节点共用:     1台部署节点(配一块硬盘,运行ceph-depo ...

  7. nodeslector使用

    问题: node节点挂了一个, 无法切换到另一个node上 解决: .指定了 nodeslector .设置了下面: hostNetwork: true dnsPolicy: ClusterFirst ...

  8. mysql 严重锁表解决方案

    转自 http://blog.csdn.net/miltonzhong/article/details/20562587 http://wangwei3.iteye.com/blog/784435

  9. .Netcore 2.0 Ocelot Api网关教程(2)- 路由

    .Netcore 2.0 Ocelot Api网关教程(1) 路由介绍 上一篇文章搭建了一个简单的Api网关,可以实现简单的Api路由,本文介绍一下路由,即配置文件中ReRoutes,ReRoutes ...

  10. vue中 keep-alive 组件的作用

    原文地址 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前 ...