表单 onFinish 的 Antd 类型是什么？

Question

现在我在我的代码中到处都在使用它：

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleCreate = (input: any): void => {
  saveToBackend({
    title: input.title,
    other: input.other,
    // ...
  })
};

<Form onFinish={handleCreate}>
  // ...
</Form>

我应该使用什么类型的输入来使事情更安全？另外，antd 类型在哪里，所以我可以查看它们的实现是什么样的，所以我也知道如何在其他情况下使用它们？

如果类型实际上是 any，我应该怎么做才能使其更安全？

Answer 1

您可以定义为包装在表单内的所有字段创建一个接口，并将其用作您要使用的类型。您也可以在 useForm Hook 中添加类型。

import { Checkbox, Form, Input } from 'antd';
import './style.css';

const { Item } = Form;

interface FormRule {
    name: string;
    isVerified: boolean;
}

export default function App() {
    const [form] = Form.useForm<FormRule>();

    const onFinish = (data: FormRule) => {};

    return (
        <Form
            form={form}
            requiredMark={false}
            layout='vertical'
            // onFinish={(data) => {}} // => Write `data.`. It will show all the keys or Hover on `data` (Shows The Type of data [FormRule] )
            onFinish={onFinish}
        >
            <Item name='name' label='Name'>
                <Input />
            </Item>

            <Item name='isVerified' label='Verified' valuePropName='checked'>
                <Checkbox />
            </Item>
        </Form>
    );
}

如果在 useForm 中添加类型，则在设置字段值时可以利用编辑器智能感知：

form.setFieldsValue({ ... })}

表单 onFinish 的 Antd 类型是什么？

What is the Antd type for form onFinish?

typescript

reactjs

antd