要获取表单项的值（value），您可以使用 Ant Design 的 Form 组件提供的 getFieldDecorator 方法，或者使用 useForm 自定义 hook，并通过 onChange 事件来更新和获取表单项的值。
以下是两种常见的方式：
- 使用 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 获取单个表单项 "姓名" 的值。
