TypeScript + React：事件处理 & 数据请求

如何用 ts 来编写 react 中的事件处理和数据请求？

功能

在 employee/QueryForm 组件中，升级 Input、Select 为受控组件，Button 添加数据请求事件，以渲染员工信息列表。

实现

抽离接口文件

我们在 src/interface 下，存放所有与后端交互的数据请求类型。比如， employee/QueryForm 中的状态（state）就是向后端发送的数据请求的格式，可以单独抽离成接口。

/*
 ** src/interface/employee.ts
 */

export interface EmployeeRequest {
   
  name: string;
  departmentId: number | undefinded;
}

// 单条数据
interface EmployeeInfo {
   
  id: number;
  key: number;
  name: string;
  department: string;
  hiredate: string;
  level: string;
}

export type EmployeeResponse = EmployeeInfo[] | undefinded;

定义接口文件的好处有二：

• 有利于项目维护，后续开发人员对格式类型一目了然，使用接口的变量会有自动提示功能。
• 类型检查，对于未考虑到的边界情况，ts 可以全面涵盖，报错提醒。

事件处理

初始化组件状态

import {
    EmployeeRequest } from "../../interface/employee";

// class QueryForm extends Component<{}, EmployeeRequest>
class QueryForm extends Component<{
   }, EmployeeRequest> {
   
  state = {
   
    name: "",
    departmentId: undefined,
  };
}

为 Input 和 Select 绑定 value、添加事件

class QueryForm extends Component<{}, EmployeeRequest> {
  state = {
    name: "",
    departmentId: undefined,
  };
  /*
   ** 根据 `Antd` 官方接口定义，`Input` 的 `onChange` 回调会返回一个事件类型
   ** onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined
   */
  handleNameChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({ name: e.currentTarget.value });
  };

  /*
   ** onChange?: ((value: number, option: OptionsType | OptionData | OptionGroupData) => void) | undefined
   */
  handl