TypeScript 中的 React 事件类型
- 在 TypeScript 中为 React 事件添加类型
-
在 TypeScript 中对事件使用 React
SyntheticEvent类型 - 在 TypeScript 中处理键盘事件
- 在 TypeScript 中处理鼠标事件
在 React 中，经常需要监听由于对某些 HTML 元素的某些操作而触发的事件监听器。TypeScript 对由于 HTML 元素上的某些操作（例如触摸、单击、聚焦和其他操作）而触发的所有事件具有强大的键入支持。
本文将演示如何在 React 中为不同的事件添加类型。
在 TypeScript 中为 React 事件添加类型
React 对由 DOM 上的操作触发的各种 HTML 事件有其类型定义。事件是由于某些操作而触发的，例如单击或更改某些输入元素。
事件触发器的一个示例是标准 HTML 文本框。
<input value={value} onChange={handleValueChange} />
上面显示了 jsx 中的一个示例，其中 handleValueChange 接收一个 event 对象，该对象引用由于文本输入框中输入的更改而触发的事件。
考虑 React 代码段的示例，必须为传递给 handleValueChange 函数的事件添加适当的类型。
const InputComponent = () => {
const [ value, setValue ] = React.useState<string>("");
const handleValueChange : React.ChangeEventHandler<HTMLInputElement> = (event) => {
setValue(event.target.value);
}
return (
<input value={value} onChange={handleValueChange}/>
)
}
因此类型 ChangeEventHandler<HTMLInputElement> 是输入文本框中文本更改事件的类型。它可以从 React 中导入，例如 import {ChangeEventHandler} from 'react'。
这种类型也可以用 React.FormEvent<HTMLInputElement> 类型表示。React 事件的一些有用的类型别名可以是：
type InputChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>
type TextAreaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>
type SelectChangeEventHandler = React.ChangeEventHandler<HTMLSelectElement>
// can be used as
const handleOptions : SelectChangeEventHandler = (event) => {
}
在 TypeScript 中对事件使用 React SyntheticEvent 类型
React SyntheticEvent 类型充当所有事件类型的包装器，如果不需要强类型安全性，可以使用它。可以根据需要对某些输入使用类型断言。
const FormElement = () => {
return (
<form
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
// type assertions done on the target
const target = e.target as typeof e.target & {
email: { value: string };
password: { value: string };
};
const email = target.email.value;
const password = target.password.value;
}}
>
<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="Sign in" />
</div>
</form>
)
}
在 TypeScript 中处理键盘事件
当在键盘上按下一个键时触发键盘事件。React 对有关键盘事件的类型有很好的支持。
const handleKeyBoardPress = (event : React.KeyboardEvent<Element>) => {
if (event.key === 'Enter'){
// do something on press of enter key
}
}
它也可以表示为事件处理程序。
const handleKeyBoardPress : KeyboardEventHandler<Element> = (event) => {
if (event.key === 'Enter'){
// do something on press of enter key
}
}
Element 是封装了以下函数 handleKeyBoardPress 的组件。
在 TypeScript 中处理鼠标事件
鼠标事件也可以通过在 TypeScript 中添加类型来支持。需要类型断言来访问与触发鼠标事件的 HTML 元素关联的方法。
const handleOnClick : React.MouseEventHandler<HTMLInputElement> = (event) => {
const HTMLButton = e.target as HTMLElement;
}
