typescript antd form表单获取值

在TypeScript中使用Ant Design的Form表单获取值的步骤如下：

1. **安装依赖**：
首先，确保你已经安装了`antd`和`@types/react`等必要的依赖。

   npm install antd
   npm install --save-dev @types/react

2. **创建表单组件**：
使用Ant Design的`Form`组件来创建一个表单，并使用`useForm`钩子来获取表单实例。

   import React, { useState } from 'react';
   import { Form, Input, Button } from 'antd';
   import { FormInstance } from 'antd/lib/form';

   const MyForm: React.FC = () => {
     const [form] = Form.useForm();
     const [formValues, setFormValues] = useState<any>({});

     const handleSubmit = () => {
       form.validateFields().then(values => {
         setFormValues(values);
       }).catch(info => {
         console.log('Validate Failed:', info);
       });
     };

     return (
       <div>
         <Form form={form} name="myForm">
           <Form.Item name="username" label="Username">
             <Input />
           </Form.Item>
           <Form.Item name="password" label="Password">
             <Input.Password />
           </Form.Item>
           <Form.Item>
             <Button type="primary" onClick={handleSubmit}>
               Submit
             </Button>
           </Form.Item>
         </Form>
         <div>
           <h3>Form Values:</h3>
           <pre>{JSON.stringify(formValues, null, 2)}</pre>
         </div>
       </div>
     );
   };

   export default MyForm;

3. **获取表单值**：
在上述代码中，`handleSubmit`函数会验证表单并获取表单值，然后将这些值设置到`formValues`状态中并显示出来。

4. **使用表单实例**：
通过`Form.useForm()`获取表单实例，可以在需要的地方调用`form.setFieldsValue`来设置表单值，或者调用`form.resetFields`来重置表单。

   const handleReset = () => {
     form.resetFields();
   };

5. **完整示例**：
下面是一个完整的示例，展示了如何创建表单、获取值和重置表单。

   import React, { useState } from 'react';
   import { Form, Input, Button } from 'antd';
   import { FormInstance } from 'antd/lib/form';

   const MyForm: React.FC = () => {
     const [form] = Form.useForm();
     const [formValues, setFormValues] = useState<any>({});

     const handleSubmit = () => {
       form.validateFields().then(values => {
         setFormValues(values);
       }).catch(info => {
         console.log('Validate Failed:', info);
       });
     };

     const handleReset = () => {
       form.resetFields();
     };

     return (
       <div>
         <Form form={form} name="myForm">
           <Form.Item name="username" label="Username">
             <Input />
           </Form.Item>
           <Form.Item name="password" label="Password">
             <Input.Password />
           </Form.Item>
           <Form.Item>
             <Button type="primary" onClick={handleSubmit}>
               Submit
             </Button>
             <Button onClick={handleReset} style={{ marginLeft: '10px' }}>
               Reset
             </Button>
           </Form.Item>
         </Form>
         <div>
           <h3>Form Values:</h3>
           <pre>{JSON.stringify(formValues, null, 2)}</pre>
         </div>
       </div>
     );
   };

   export default MyForm;

通过以上步骤，你可以在TypeScript中使用Ant Design的Form表单来获取和操作表单值。