Question

使用下面的代码，我未能成功将组件转换为Typescript。

我遇到的问题位于handleChange类型似乎没有正确属性的event.target函数中。如果将其更改为嵌入式箭头功能，则可以看到类型推断为React.ChangeEvent<HTMLInputElement>，因此事件类型看起来正确。

我的反应类型为"@types/react": "^16.8.23",

import * as React from "react";

export default class SignIn extends React.Component<SignInProps, SignInState> {
    constructor (props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

        this.state = {
            email: '',
            password: ''
        };
    }

    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
        const type = event.target.type; // Property 'type' does not exist on type 'EventTarget & HTMLInputElement'.
        const value = event.target.value; // Property 'value' does not exist on type 'EventTarget & HTMLInputElement'.
        // do other stuff
    }

    async handleSubmit(event) {
        // do stuff
    }

    render () {
        return (
            <form id="sign-in" onSubmit={this.handleSubmit}>
                <input onChange={this.handleChange} placeholder="Email address" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
                <input onChange={this.handleChange} placeholder="Password" type="password" />
                <input type="submit" />
            </form>
        );
    }
}

我注意到，如果我点击查看定义，就会看到

interface EventTarget { }
interface Document { }
interface DataTransfer { }
interface StyleMedia { }

interface Element { }

interface HTMLElement extends Element { }
... excluded for brevity
interface HTMLInputElement extends HTMLElement { }

这些完全为空是正常的吗？这可能是它认为没有类型的原因。

Answer 1

当项目中没有dom库时，此处为ReactNative的空类型定义。在针对浏览器的React项目中，这些类型来自dom库。

您可能忘记了将dom库添加到您的tsconfig.json文件中，请确保此文件中包含该库：

{
    "compilerOptions": {
        "lib": ["dom", "dom.iterable", "esnext"],
        // ...
}

Typescript React事件处理程序类型

1 个答案: