React + TypeScript实战（一）设定事件处理函数的参数类型

event类型设置

首先提出需求，给input框绑定一个change事件，打印输入框中每次输入的内容。

在设定参数类型的时候，首先想到的就是Event类型：

type IState = readonly<{
    ...
}>

class Student extends React.Component<any, IState>{
  inputChange = (e: Event) => {
    console.log(((e.target) as HTMLInputElement).value);
  }

  render(): React.ReactNode {
    return <div className="container">
      <div className="box">
        <input type="text" onChange={this.inputChange}/>
      </div>
    </div>
  }
}

但是这样会报错：

不能将类型“(e: Event) => void”分配给类型“ChangeEventHandler<HTMLInputElement>”。
参数“e”和“event” 的类型不兼容。
类型“ChangeEvent<HTMLInputElement>”缺少类型“Event”的以下属性: cancelBubble, composed, returnValue, srcElement 及其他 7 项。ts(2322)
index.d.ts(2254, 9): 所需类型来自属性 "onChange"，在此处的 "DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>" 类型上声明该属性

从这个报错信息来看，onChange事件需要的似乎是一个这样类型的处理函数ChangeEventHandler<HTMLInputElement>

现在先引入ChangeEventHandler，看一看它对应的源码：

type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;

这意味着，我们的onChange事件是一个EventHandler，它自带的event参数类型为ChangeEvent<T>，由于这里是一个输入框，所以应该为event设置参数为ChangeEvent<HTMLInputElement>再来试试，成功获取到了输入内容！

type IState = readonly<{
    ...
}>

class Student extends React.Component<any, IState>{
  inputChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log((e.target.value));
  }

  render(): React.ReactNode {
    return <div className="container">
      <div className="box">
        <input type="text" onChange={this.inputChange}/>
      </div>
    </div>
  }
}

如果你使用的是hooks写法，也可以这样写，不过这并不是本节的重点：

inputChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>((e) => {
    console.log((e.target.value));
},[])

接下来给扩展一个功能，如果有很多个输入框，是否可以共用同一个onChange方法呢？

根据参数执行特定方法

比如说，我现在需要多个输入框，分别输入学号、姓名、年龄的信息

如果分别给每个输入框绑定不同的事件，那就要写三个相似度非常高的函数，这样不太美观：

import React, { ChangeEvent } from 'react'

type IState = Readonly<{
  no: string,
  name: string,
  age: string
}>

class Student extends React.Component<any, IState>{
  readonly state: IState = {
    no: "",
    name: "",
    age: "",
  	list: []
  }
  
  inputChangeNo = (key: string, e: ChangeEvent<HTMLInputElement>) => {
    // 不同的输入框触发change事件，最后打印的key值不同
    console.log(key, e.target.value);
  }
  
  inputChangeName = (key: string, e: ChangeEvent<HTMLInputElement>) => {
    console.log(key, e.target.value);
  }
  
  inputChangeAge = (key: string, e: ChangeEvent<HTMLInputElement>) => {
    console.log(key, e.target.value);
  }

  render(): React.ReactNode {
    return <div className="container">
      <div className="box">
        <input
          type="text"
          value={this.state.no}
          onChange={(e) => this.inputChangeNo("no", e)}
          placeholder="输入学号"
        />
        <input
          type="text"
          value={this.state.name}
          onChange={(e) => this.inputChangeName("name", e)}
          placeholder="输入姓名"
        />
        <input
          type="text"
          value={this.state.age}
          onChange={(e) => this.inputChangeAge("age", e)}
          placeholder="输入年龄"
        />
      </div>
    </div>
  }
}

export default Student

看起来我们似乎可以执行这样的操作：

inputChange = (key: string, e: ChangeEvent<HTMLInputElement>) => {
    this.setState({
        [key]: e.target.value
    })
}

但是对于key值来说，他是一个字符串索引类型数据，所以一定需要给他绑定对应的类型。

在这个案例中，我们需要用到的属性有：

type IState = Readonly<{
  no: string,
  name: string,
  age: string,
  list: []
}>

所以索引对应的类型应该有 "no" | "name" | "age "，成功设定！

import React, { ChangeEvent } from 'react'

interface PeopleType{
  id: number
  name: string
  age: string
}

interface IState{
  [name: string]: string | PeopleType[]
  list: PeopleType[]
  no: string,
  name: string,
  age: string
}

class People extends React.Component<any, IState>{
  readonly state: IState = {
    no: "",
    name: "",
    age: "",
    list: []
  }

  inputChange = <K extends keyof IState>(key: K, e: ChangeEvent<HTMLInputElement>) => {
    this.setState({
      [key]: e.target.value
    })
  }

  render(): React.ReactNode {
    return <div className="container">
      <div className="box">
        <input
          type="text"
          value={this.state.no}
          onChange={(e) => this.inputChange("no", e)}
          placeholder="输入学号"
        />
        <input
          type="text"
          value={this.state.name}
          onChange={(e) => this.inputChange("name", e)}
          placeholder="输入姓名"
        />
        <input
          type="text"
          value={this.state.age}
          onChange={(e) => this.inputChange("age", e)}
          placeholder="输入年龄"
        />
      </div>
    </div>
  }
}

export default People