react绑定事件的几种写法
方法一:最麻烦的写法,不推荐
- 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绑定事件的几种写法的更多相关文章
- 无废话Android之常见adb指令、电话拨号器、点击事件的4种写法、短信发送器、Android 中各种布局(1)
1.Android是什么 手机设备的软件栈,包括一个完整的操作系统.中间件.关键的应用程序,底层是linux内核,安全管理.内存管理.进程管理.电源管理.硬件驱动 2.Dalvik VM 和 JVM ...
- Android开发系列之按钮事件的4种写法
经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...
- Android开发系列之button事件的4种写法
经过前两篇blog的铺垫,我们今天热身一下,做个简单的样例. 文件夹结构还是引用上篇blog的截图. 详细实现代码: public class MainActivity extends Activit ...
- React绑定事件动态化的实现方法
一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...
- Android按钮事件的4种写法
经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...
- (转)Ext.Button点击事件的三种写法
转自:http://maidini.blog.163.com/blog/static/377627042008111061844345/ ExtJs的写法太灵活了,现在收集了关于Button点击事件的 ...
- Android笔记---点击事件的四种写法
Android 点击事件的四种写法: 1. 以内部类的形式实现 OnClickListener 接口.定义点击事件 class MainActivity extents Activity{ // .. ...
- Android中点击事件的四种写法详解
Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法 ...
- Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
随机推荐
- spark-submit 提交任务及参数说明
spark-submit 可以提交任务到 spark 集群执行,也可以提交到 hadoop 的 yarn 集群执行. 1. 例子 一个最简单的例子,部署 spark standalone 模式后,提交 ...
- <javaScript>谈谈JavaScript中的变量、指针和引用
1.变量我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢?事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中 ...
- LC 275. H-Index II
Given an array of citations sorted in ascending order (each citation is a non-negative integer) of a ...
- ZooKeeper Lead选举
前段时间学习了zookeeper,对其中比较难理解并且容易忘掉的知识点做一个记录~ 关键词: myId:表示在集群中,自身对应的id zxId:节点状态发生改变时,产生的一个时间戳,并且这个时间戳全局 ...
- centos6 安装docker
docker 安装要求内核大于3.10 , 而centos6 机器上内核一般是2.6 , 除了升级内核外, 还可以安装低版本的docker , 本文介绍docker 1.7的安装. 机器 环境 [ro ...
- 分布式存储ceph部署(2)
一.部署准备: 准备5台机器(linux系统为centos7.6版本),当然也可以至少3台机器并充当部署节点和客户端,可以与ceph节点共用: 1台部署节点(配一块硬盘,运行ceph-depo ...
- nodeslector使用
问题: node节点挂了一个, 无法切换到另一个node上 解决: .指定了 nodeslector .设置了下面: hostNetwork: true dnsPolicy: ClusterFirst ...
- mysql 严重锁表解决方案
转自 http://blog.csdn.net/miltonzhong/article/details/20562587 http://wangwei3.iteye.com/blog/784435
- .Netcore 2.0 Ocelot Api网关教程(2)- 路由
.Netcore 2.0 Ocelot Api网关教程(1) 路由介绍 上一篇文章搭建了一个简单的Api网关,可以实现简单的Api路由,本文介绍一下路由,即配置文件中ReRoutes,ReRoutes ...
- vue中 keep-alive 组件的作用
原文地址 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前 ...