「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。