typescript 中的 react 事件类型-ag捕鱼王app官网

在 react 中，经常需要监听由于对某些 html 元素的某些操作而触发的事件监听器。 对由于 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 是输入文本框中文本更改事件的类型。它可以从 react 中导入，例如 import {changeeventhandler} from 'react'。

这种类型也可以用 react.formevent 类型表示。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;
}