在「React TS3 专题」亲自动手创建一个类组件，我们一起学习了如何用 TS 的方式在React 里定义类组件(class component)以及了解了什么是 JSX。本篇文章，笔者将带着大家一起了解下如何使用 TS 的方式在 React 里定义类组件事件。

在 JSX 里简单的定义事件

最简单的方式就是在JSX里添加事件，上一小节，我们熟悉了如何在 JSX 添加属性，因此很自然的想到，我们可以在 JSX 里添加事件：

1、第一步在上一小节例子的基础上，我们添加按钮的点击事件，在确认按钮上添加点击事件属性，代码如下：

...

我们点击按钮时就触发调用 handleOkClick 方法。

2、接下来我们创建 handleOkClick 方法：

private handleOkClick() { console.log("Ok clicked");}

3、接下来我们运行下我们的项目

通过启动命令运行项目，我们来点击确认按钮，就会看到如下图所示的提示：

关于this的问题

上述的事件方法里还存在一个隐藏的风险，比如我们调用this属性时，我们来看看会发生什么。

1、首先我们来修改点击事件的方法：

private handleOkClick() { console.log("Ok clicked

dw上按钮事件 pb_「React TS3 专题」使用 TS 的方式在类组件里定义事件相关推荐

这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
「mysql优化专题」你们要的多表查询优化来啦！请查收（4）
上一篇讲的是单表查询的优化,(本文末有链接).当然,对数据表的多表查询也是必不可少的.本篇内容主要讲解多表联合查询的优化一.多表查询连接的选择: 相信这内连接,左连接什么的大家都比较熟悉了,当然还有 ...
「mysql优化专题」90%程序员都会忽略的增删改优化（2）
前文一篇「mysql优化专题」这大概是一篇最好的mysql优化入门文章(1)让大家知道msql优化,究竟在优化什么,本篇为mysql优化专题的第二篇,主要先从增删改进行优化. 补充知识点:操作数据语句 ...
「分布式技术专题」基于Gossip协议的去中心服务
概述 Gossip 协议可以翻译为流言协议.它是在 1987 年发表在 ACM 上的论文 <Epidemic Algorithms for Replicated Database Mainten ...
分享一个我们团队新上线剪藏插件「妙剪藏」一键收藏网页，还可以做网盘使用
我们团队本周新上线了剪藏工具「妙剪藏」,可以将网页端和微信中的重要内容保存到你的工作空间:并且支持上传多类型文件,做网盘使用:增加自定义标签系统,方便分类文件: 目前支持的剪藏方式: 浏览器插件 ...
「CSS 3D 专题」搞懂 CSS 3D，你必须理解 perspective（视域）这个属性
关注前端达人,与你共同进步开篇上一章节<学习前,你需要了解什么是CSS 3D?>里,我们一起了解什么是CSS 3D,本篇章节笔者将带着大家学习 perspective(视域)这个重要属 ...
oracle一列中间加一个字_「首席看架构」用GoldenGate创建从Oracle到Kafka的CDC事件流...
我们通过GoldenGate技术在Oracle DB和Kafka代理之间创建集成,该技术实时发布Kafka中的CDC事件流. Oracle在其Oracle GoldenGate for Big Dat ...
「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)【面试重点】
本专题讲到索引查询优化,恭喜你,已经达到mysql优化的中级水平.这篇我们要讲的是mysql优化中重点中的重点--索引优化.面试官百分百必问目录多关于索引,分为以下几点来讲解: 一.索引的概述(什 ...
「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)
目录(技术文) 多关于索引,分为以下几点来讲解: 一.索引的概述(什么是索引,索引的优缺点) 二.索引的基本使用(创建索引) 三.索引的基本原理(面试重点) 四.索引的数据结构(B树,hash) 五. ...

dw上按钮事件 pb_「React TS3 专题」使用 TS 的方式在类组件里定义事件

在 JSX 里简单的定义事件

关于this的问题

dw上按钮事件 pb_「React TS3 专题」使用 TS 的方式在类组件里定义事件相关推荐

最新文章

热门文章