form获取表单项的值

要获取表单项的值（value），您可以使用 Ant Design 的 Form 组件提供的 getFieldDecorator 方法，或者使用 useForm 自定义 hook，并通过 onChange 事件来更新和获取表单项的值。

以下是两种常见的方式：

1. 使用 getFieldDecorator 方法：

   import { Form, Input } from 'antd';
   
   const MyForm = () => {
     const onFinish = (values) => {
       console.log('Form values:', values); // 表单的所有值
       console.log('姓名:', values.username); // 单个表单项的值
     };
   
     return (
       <Form onFinish={onFinish}>
         <Form.Item
           label="姓名"
           name="username"
           rules={[{ required: true, message: '请输入姓名' }]}
         >
           <Input placeholder="请输入姓名" />
         </Form.Item>
         
         <Form.Item>
           <Button type="primary" htmlType="submit">
             提交
           </Button>
         </Form.Item>
       </Form>
     );
   };
   
   export default MyForm;

   在上述示例中，我们使用了 Ant Design 的 Form 组件，并通过 onFinish 回调函数获取整个表单的值，然后使用 values.username 获取到单个表单项 "姓名" 的值

2. 使用 useForm 自定义 hook

   import { useForm } from 'antd';
   
   const MyForm = () => {
     const [form] = useForm();
   
     const onFinish = () => {
       form
         .validateFields()
         .then((values) => {
           console.log('Form values:', values); // 表单的所有值
           console.log('姓名:', values.username); // 单个表单项的值
         });
     };
   
     return (
       <Form form={form} onFinish={onFinish}>
         <Form.Item
           label="姓名"
           name="username"
           rules={[{ required: true, message: '请输入姓名' }]}
         >
           <Input placeholder="请输入姓名" />
         </Form.Item>
         
         <Form.Item>
           <Button type="primary" htmlType="submit">
             提交
           </Button>
         </Form.Item>
       </Form>
     );
   };
   
   export default MyForm;

   在上述示例中，我们使用了 Ant Design 的 useForm 自定义 hook 来处理表单逻辑。通过调用 form.validateFields().then((values) => { ... })，您可以获取整个表单的值，并使用 values.username 获取单个表单项 "姓名" 的值。