如何打字更简洁

Question

我想知道是否可以以更简洁的方式键入 handleSubmit。也许通过放置 eventDefault 创建一个新界面。我该怎么做？

  import {Project} from "../ProjectsPage/Project";

interface FormTypeProps {
    onCancel: () => void;
    onSave: (project: Project) => void;
}

export function ProjectForm({onCancel, onSave}: FormTypeProps) {
    const handleSubmit = (event: { preventDefault: () => void; }) => {
        event.preventDefault()
        onSave(new Project({name: 'Update Project'}))
    }


    return (
        <form className="input-group vertical" onSubmit={handleSubmit}>
            <label htmlFor="name">Project Name</label>
            <input type="text" name="name" placeholder="enter name"/>
            <label htmlFor="description">Project Description</label>
            <textarea name="description" placeholder="enter description"/>
            <label htmlFor="budget">Project Budget</label>
            <input type="number" name="budget" placeholder="enter budget"/>
            <label htmlFor="isActive">Active?</label>
            <input type="checkbox" name="isActive"/>
            <div className="input-group">
                <button className="primary bordered medium">Save</button>
                <span/>
                <button type="button" className="bordered medium" onClick={onCancel}>
                    Cancel
                </button>
            </div>
        </form>
    )
}

Answer 1

您可以将类型分配给函数本身或函数的参数，即事件。

React.FormEventHandler<HTMLFormElement>

这是函数的类型。如果你这样使用它：

handleSubmit: React.FormEventHandler<HTMLFormElement> = e => {
}

然后变量 e 的类型将被自动推断为 React.FormEvent。所以您实际上不需要知道事件类型，因为您可以将类型应用于函数本身并获得正确的类型。

或者您可以将类型分配给事件参数 e。

handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
}

现在 handleSubmit 属性的类型被推断为 (e: React.FormEvent<HTMLFormElement>) => void.

Answer 2

您可以使用 React.FormEvent 作为 event 参数的类型：

import React, { FormEvent } from "react";

// ...

const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    // ...
};

React 对各种事件都有自己的合成事件类型，您可以在按照自己的方式设置处理程序时使用它，在元素上使用 onXyz 属性。（当通过 addEventListener 设置处理程序时，这有时仍然是必要的，重要的是 而不是 使用 React 的合成事件类型，因为您没有设置 React 事件处理程序，您正在设置一个 DOM 事件处理程序。但是按照您的操作方式，您需要合成类型。）

您可以将函数本身键入 FormEventHandler<HTMLFormElement>:

import React, { FormEvent } from "react";

// ...

const handleSubmit: FormEventHandler = (event) => {
    event.preventDefault();
    // ...
};

请注意，FormEvent 和 FormEventHandler 都是通用类型，接受 target 将成为的元素类型的类型参数。默认值为 Element，这通常就足够了，但如果您想更彻底，您也可以提供 HTMLFormElement（例如，FormEvent<HTMLFormElement>）。

如何打字更简洁

How to type less verbosely

typescript

reactjs

typescript-typings