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 ...
随机推荐
- laravel 链式组合查询数据
laravel 链式组合查询数据 一.总结 一句话总结: - 就是链式操作的基本操作,因为返回的都是一直可以进行链式操作的对象,所以我们接收返回的对象即可 - $result = DB::table( ...
- C++ UFT-8和GB2312间的转换
在这个帖子找到的代码 还蛮好用的 https://bbs.csdn.net/topics/391040755 #include <codecvt> #include <locale& ...
- koa 实现上传文件
项目目录: 1.上传单个文件 思路: (1)获取上传文件,使用 const file = ctx.request.files.file (2)我们使用 fs.createReadStream 来读取文 ...
- [MyBatis] 如何让MyBatis支持代码级事务处理
MyBatis提供的sqlSession对象是可以用来帮助我们实现事务处理的,方式和JDBC的类似,具体请见代码: import java.sql.Connection; import java.sq ...
- C# WPF ASP.net 上传多文件和数据
C# WinForm 上传多文件和数据 public static class HttpHelper { private static readonly Encoding DEFAULTENCODE ...
- 一百零三:CMS系统之使用sweetalert提示框优化返回结果
在base模板中引用 在修改密码的js中使用 $(function () { $('#submit').click(function (evnet) { evnet.preventDefault(); ...
- js大文件上传
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...
- Apache 流框架Flink简介
1.Flink架构及特性分析 Flink是个相当早的项目,开始于2008年,但只在最近才得到注意.Flink是原生的流处理系统,提供high level的API.Flink也提供 API来像Spark ...
- CentOS8 安装 simple-scan 的方法
CentOS8删除了很多软件包,解决的思路一般是从CentOS7或EPEL7的软件仓库中寻找,并解决依赖关系. 比如找到EPEL7中有 simple-scan 软件包,但安装时发现其又依赖 gnome ...
- Linux 用户管理 与 文件权限
Linux 用户管理 与 文件权限 用户组操作 1.groupadd命令 groupadd [-g -o] gid group 各个选项具体含义如下: -g:指定新建用户组的GID号,该GID号必须唯 ...