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

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

简单的定义事件

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

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

<button className="confirm-ok" onClick={this.handleOkClick}>
...
</button>

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

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

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

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

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

关于this的问题

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

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

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

然后我们运行下程序,尝试下去点击确认按钮,不出意外的话,你将会看到如下图的报错提示:

造成这样的问题是this不能指向我们当前组件的类,提示相关属性是未定义的,常用的解决方案,就是把这种函数改成箭头函数,利用箭头函数this的穿透性,就解决了,关于箭头函数的使用问题,笔者的这篇文章「ES6基础」箭头函数(Arrow functions)有详细的介绍,不明白的可以去点击查看。

2、接下来我们将函数修改成箭头函数

private handleOkClick = () => {
    console.log("Ok clicked", this.props);
};

我们运行下项目,你就会在页面控制台,看到如下的输出,很好,如你所愿没有报错:

3、接下来,我们在取消按钮里添加取消事件:

<button className="confirm-cancel" onClick={this.handleCancelClick}>
...
</button>

4、最后我们来定义取消按钮事件的方法

private handleCancelClick = () => {
    console.log("Cancel clicked", this.props);
};

总而言之,为了避免this引发的风险问题,我们可以使用箭头函数进行有效避免此类问题,接下来我们继续聊聊如何更好的在事件定义里组织逻辑,通过属性的方式进行传递,更方便组件的重用性。

在接口里定义事件属性

上一篇文章,我们通过接口的方式定义了属性,接下来我们使用定义接口的方式实现事件的定义,示例代码如下:

1、首先接着上篇文章的示例,我们在接口添加如下两个待实现的方法,示例如下:

interface IProps {
    title: string;
    content: string;
    cancelCaption?: string;
    okCaption?: string;
    onOkClick: () => void;
    onCancelClick: () => void;
}

我们定义的事件属性是必填的,因此你会在App.tsx文件里,会提示这两个属性没有定义,稍后我们会解决此问题。

2、接下来我们在 Confirm.tsx 文件里实现接口相关方法的定义,示例代码如下:

private handleCancelClick = () => {
    this.props.onCancelClick();
};
private handleOkClick = () => {
    this.props.onOkClick();
};

3、接下来我们在 App.tsx 定义相关方法,修改出现的错误问题,示例代码如下:

const handleCancelConfirmClick = () => {
    console.log("Cancel clicked");
};
const handleOkConfirmClick = () => {
    console.log("Ok clicked");
};

4、最后我们在Confirm组件里添加上事件属性

<Confirm
...
onCancelClick={this.handleCancelConfirmClick}
onOkClick={this.handleOkConfirmClick}
/>

修改完后,我们启动项目,然后点击组件的确认和取消按钮,你将会看到以下内容:

小节

今天的文章我们就到这里,内容不是太多,我们一起学习了如何在React里使用TS的方法定义事件,以及使用箭头函数的方式进行事件方法的实现,接下来的文章,笔者将继续介绍,在React里如何用 TS 的方式定义 State。

原文发布于微信公众号 - 前端达人(frontend84)

原文发表时间:2019-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券