迹忆客 专注技术分享

在 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;
}