在处理AutoForm（例如基于Ant Design等UI框架构建的表单组件）时，提取其中的数据通常需要通过绑定回调函数、状态管理或直接获取表单实例的方式完成。以下是几种常见的方法： --- ### **1. 使用 `onFinish` 回调** 大多数现代表单库会提供一个内置的事件监听器，如 `onFinish` 或类似机制，在用户提交表单并通过校验后触发该回调，并将收集到的表单值作为参数传递。 ```jsx import { Form } from 'antd'; const MyComponent = () => { const onFinish = (values) => { console.log('Extracted Data:', values); // 提取的数据在这里 }; return ( <Form onFinish={onFinish}> {/* 表单项 */} </Form> ); }; ``` **优点**: 简洁易用 **缺点**: 需要在完整提交之后才能拿到数据 --- ### **2. 手动控制表单实例** 如果想更灵活地访问表单数据，可以利用表单引用 (`ref`) 获取其内部 API 来同步读取字段内容。 #### 示例代码： ```jsx import React, { useRef } from 'react'; import { Button, Form, Input } from 'antd'; const MyComponent = () => { const formRef = useRef(); const handleSubmit = () => { formRef.current.validateFields().then((values) => { console.log('Data Extracted Manually:', values); }); }; return ( <> <Form ref={formRef} layout="vertical"> <Form.Item name="username" label="用户名" rules={[{ required: true }]}> <Input /> </Form.Item> <Button onClick={handleSubmit}>手动提取</Button> </Form> </> ); }; export default MyComponent; ``` **优点**: 可随时主动调用验证并取出最新数据 **缺点**: 相对复杂一些 --- ### **3. 利用受控组件模式** 对于某些场景下不需要依赖第三方提供的自动功能，则可以直接借助React的状态维护输入框的变化情况，这种方式完全自定义了所有交互逻辑。 示例略... 不过这种方法一般用于简单需求而非完整的动态生成型表单系统中！ --- 以上介绍了三种主流方案供参考选择合适的一个吧～