表单和事件

如果性能不是问题（通常不是！），内联处理程序最简单，因为您可以直接使用类型推断和上下文类型

const el = (
  <button
    onClick={(event) => {
      /* event will be correctly typed automatically! */
    }}
  />
);

但是，如果您需要单独定义事件处理程序，IDE 工具在这里非常方便，因为 @type 定义提供了丰富的类型信息。输入您要查找的内容，通常自动完成功能会帮助您。以下是表单事件的 onChange 示例

type State = {
  text: string;
};
class App extends React.Component<Props, State> {
  state = {
    text: "",
  };

  // typing on RIGHT hand side of =
  onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({ text: e.currentTarget.value });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.onChange} />
      </div>
    );
  }
}

在 TypeScript Playground 中查看

您可以选择为事件处理程序本身应用类型（由 @TomasHubelbauer 贡献），而不是使用 React.FormEvent<> 和 void 为参数和返回值设定类型。

  // typing on LEFT hand side of =
  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    this.setState({text: e.currentTarget.value})
  }

为什么有两种方法可以做同样的事情？

第一种方法使用推断的方法签名 (e: React.FormEvent<HTMLInputElement>): void，第二种方法强制执行 @types/react 提供的委托的类型。因此，React.ChangeEventHandler<> 只是 @types/react 提供的“经过验证”的类型，而您可以将推断的方法视为更…手工制作 的。无论哪种方式，这都是一个很好的模式。查看我们的 Github PR 获取更多信息。

为表单中非受控组件的 onSubmit 设定类型

如果您不太关心事件的类型，您可以只使用 React.SyntheticEvent。如果您的目标表单具有您想要访问的自定义命名输入，您可以使用类型断言。

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      email: { value: string };
      password: { value: string };
    };
    const email = target.email.value; // typechecks!
    const password = target.password.value; // typechecks!
    // etc...
  }}
>
  <div>
    <label>
      Email:
      <input type="email" name="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="Log in" />
  </div>
</form>

在 TypeScript Playground 中查看

当然，如果您正在创建任何重要的表单，您应该使用 Formik 或 React Hook Form，它们是用 TypeScript 编写的。

事件类型列表

事件类型	描述
AnimationEvent	CSS 动画。
ChangeEvent	更改 `<input>`、`<select>` 和 `<textarea>` 元素的值。
ClipboardEvent	使用复制、粘贴和剪切事件。
CompositionEvent	由于用户间接输入文本而发生的事件（例如，根据浏览器和 PC 设置，如果您例如想要在美式键盘上输入日语，可能会出现一个弹出窗口，其中包含其他字符）。
DragEvent	使用指针设备（例如鼠标）进行拖放交互。
FocusEvent	元素获得或失去焦点时发生的事件。
FormEvent	表单或表单元素获得/失去焦点、表单元素值发生更改或表单提交时发生的事件。
InvalidEvent	当输入的有效性限制失败时触发（例如 `<input type="number" max="10">`，有人输入数字 20）。
KeyboardEvent	用户与键盘的交互。每个事件都描述一个按键交互。
MouseEvent	由于用户与指向设备（例如鼠标）交互而发生的事件。
PointerEvent	由于用户与各种指向设备（如鼠标、笔/触控笔、触摸屏）交互而发生的事件，并且还支持多点触控。除非您为旧版浏览器（IE10 或 Safari 12）开发，否则建议使用指针事件。扩展 UIEvent。
TouchEvent	由于用户与触摸设备交互而发生的事件。扩展 UIEvent。
TransitionEvent	CSS 过渡。并非所有浏览器都完全支持。扩展 UIEvent
UIEvent	鼠标、触摸和指针事件的基本事件。
WheelEvent	在鼠标滚轮或类似输入设备上滚动。（注意：`wheel` 事件不要与 `scroll` 事件混淆）
SyntheticEvent	以上所有事件的基本事件。在不确定事件类型时应使用。

InputEvent 怎么样？

您可能已经注意到没有 InputEvent。这是因为 TypeScript 不支持它，因为事件本身没有完全的浏览器支持，并且在不同的浏览器中可能表现不同。您可以改用 KeyboardEvent。

来源

事件类型列表​

事件类型列表