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

import React from 'react';
class App extends React.Component {
handleClick() {
alert('点击')
}
render() {
return (
<div>
<button onClick={this.handleClick.bind(this)}>click</button>
</div>
)
}
}
export default App;

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

import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
alert('点击')
}
render() {
return (
<div>
<button onClick={this.handleClick}>click</button>
</div>
)
}
}
export default App;

方法三:最常见的写法。

import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
alert('点击')
}
render() {
return (
<div>
<button onClick={this.handleClick}>click</button>
</div>
)
}
}
export default App;

方法四:可以传参数。

import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick (e) {
alert(e)
}
render() {
return (
<div>
<button onClick={(e) => this.handleClick(e)}>click</button>
</div>
)
}
}
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. CentOS 7服务器下Nginx安装配置

    一.安装编译工具及库文件 $ yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pc ...

  2. github pr

    github----向开源框架提交pr的过程 https://blog.csdn.net/vim_wj/article/details/78300239github 的 pr 使用方法 https:/ ...

  3. pip下载提速

    方法一使用国内镜像: 清华:https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中 ...

  4. SpringCloud(四)之Netflix开源组件断路器Hystrix介绍

    一.前言? 1.Netflix Hystrix断路器是什么? Netflix Hystrix是SOA/微服务架构中提供服务隔离.熔断.降级机制的工具/框架.Netflix Hystrix是断路器的一种 ...

  5. Kotlin函数中默认参数

    Java不支持默认参数.但kotlin函数却可以 package loaderman.demo class Customer(var name:String ="name"){// ...

  6. handler四元素

    Looper 一个线程可以产生一个Looper对象,由它来管理此线程里的MessageQueue(消息队列). 我们知道一个线程是一段可执行的代码,当可执行代码执行完成后,线程生命周期便会终止,线程就 ...

  7. layui-简单的登录注册界面【转载】

    register.html 源代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ...

  8. PCL点云库(Point Cloud Library)简介

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=29 什么是PCL PCL(Point Cloud Library)是在吸收了 ...

  9. Highcharts的常用属性及导出SVG

    做了好几个项目都用到了Highcharts,好用自然不用多说,这里总结一下每次作图经常用的一些配置,方便以后查看. 引入Highcharts非常简单,只需引入对应的js,页面中写入存放表格的div,j ...

  10. Hibernate 的一些注解配置

    网上参考资料很多,但总是不符合自身习惯,遂记录下来. 一对多的关系 如class与student的关系 class中 @OneToMany(mappedBy = "class") ...