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 ...
随机推荐
- 带有时间间隔的dp
Uberwatch 题意:一个人打一群敌人,每间隔时间m能释放一次大招,消灭这个时刻上的所有敌人,起始时刻开始计算冷却时间 solution: dp[i]=max(dp[i],dp[i-m]); /* ...
- Flutter移动电商实战 --(3)底部导航栏制作
1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...
- 提高组刷题营 DAY 1 下午
DFS 深度优先搜索 通过搜索得到一棵树形图 策略:只要能发现没走过的点,就走到它.有多个点可走就随便挑一个,如果无路可走就回退,再看有没有没走过的点可走. 在图上寻找路径[少数可用最短路解决]:最短 ...
- 面向对语法读取mysql数据库数据例:$db->query($sql)、$result->fetch_array()
前面我们介绍过如何使用面向对象语法连接mysql数据库,今天技术人员继续讲解如何读取数据.虽然与以前面向过程类似,但还是有些不同,需要大家用心了解. echo '面向对象语法连接数据库test db ...
- Python 的内置函数__import__
我们知道import语句是用来导入外部模块的,当然还有from...import...也可以,但是其实import实际上是使用builtin函数__import__来工作的. 在一些程序中,我 ...
- iOS开发UIkit动力学UIDynamicAnimator一系列动画
UIDynamicAnimator类,通过这个类中的不同行为来实现一些动态特性. UIAttachmentBehavior(吸附),UICollisionBehavior(碰撞),UIGravityB ...
- XmlEncrypt
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- SpringBoot: 4.SpringBoot整合listener(转)
整合方式一:通过注解扫描完成 Listener 组件的注册 1.编写listener package com.bjsxt.listener; import javax.servlet.ServletC ...
- 三、使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- 《精通并发与Netty》学习笔记(03 - 客户端程序编写)
上节我们编写了netty服务端的程序,这节我们来写客户端程序 第一步:改造服务端程序为: (1)MyServer类: package com.ssy.netty.demo01; import io.n ...